90:I[903690,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3-5v2zikwtdtn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3bu_pn69_2ac_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1lb6na2ocrfl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1zjw9h8eodvzb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2avjef50dmojk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3-5v2zikwtdtn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3bu_pn69_2ac_.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1lb6na2ocrfl4.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1zjw9h8eodvzb.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/2avjef50dmojk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/337wrk72tvyil.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/1a7v266ajms1f.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_F6fGdtRkhKtVZAN4AcSEoy23cve6"],"SWRDataProvider"] 92:T25b2f,[V0_FILE]typescriptreact:file="components/apps/calendar.tsx" isMerged="true" "use client" import { ChevronLeft, ChevronRight } from "lucide-react" const events = [ { id: 1, title: "Team Meeting", time: "9:00 AM", color: "bg-blue-500" }, { id: 2, title: "Lunch with Sarah", time: "12:30 PM", color: "bg-green-500" }, { id: 3, title: "Project Review", time: "3:00 PM", color: "bg-purple-500" }, ] export function Calendar() { const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const dates = Array.from({ length: 35 }, (_, i) => i + 1) return (

{/* Sidebar */}

January 2024

{days.map((day) => (

{day[0]}

))} {dates.map((date) => ( ))}

{/* Main content */}

Today

{events.map((event) => (

{event.title}

{event.time}

))}

) } [V0_FILE]typescriptreact:file="components/apps/notes.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Plus, Trash2, Search } from "lucide-react" const initialNotes = [ { id: 1, title: "Meeting Notes", content: "Discussed project timeline and deliverables for Q1 2024.\n\nKey Points:\n- Launch date: March 15\n- Team size: 8 developers\n- Budget approved\n- Weekly standups on Mondays", date: "Today", folder: "Work", }, { id: 2, title: "Shopping List", content: "Groceries:\n- Milk\n- Eggs\n- Bread\n- Coffee\n- Fruits\n- Vegetables\n\nHousehold:\n- Paper towels\n- Dish soap", date: "Yesterday", folder: "Personal", }, { id: 3, title: "App Ideas", content: "New productivity app concept:\n\n1. Time tracking with AI suggestions\n2. Smart task prioritization\n3. Integration with calendar\n4. Focus mode with ambient sounds\n5. Weekly productivity reports", date: "Jan 10", folder: "Ideas", }, { id: 4, title: "Book Recommendations", content: "To Read:\n- Atomic Habits by James Clear\n- Deep Work by Cal Newport\n- The Pragmatic Programmer\n- Clean Code by Robert Martin", date: "Jan 8", folder: "Personal", }, ] export function Notes() { const [notes, setNotes] = useState(initialNotes) const [selectedNote, setSelectedNote] = useState(1) const [searchQuery, setSearchQuery] = useState("") const currentNote = notes.find((n) => n.id === selectedNote) const handleAddNote = () => { const newNote = { id: Date.now(), title: "Untitled Note", content: "", date: "Today", folder: "Notes", } setNotes([newNote, ...notes]) setSelectedNote(newNote.id) } const handleDeleteNote = () => { setNotes(notes.filter((n) => n.id !== selectedNote)) if (notes.length > 1) { setSelectedNote(notes[0].id === selectedNote ? notes[1].id : notes[0].id) } } const handleUpdateContent = (content: string) => { setNotes(notes.map((n) => (n.id === selectedNote ? { ...n, content } : n))) } const handleUpdateTitle = (title: string) => { setNotes(notes.map((n) => (n.id === selectedNote ? { ...n, title } : n))) } const filteredNotes = notes.filter( (note) => note.title.toLowerCase().includes(searchQuery.toLowerCase()) || note.content.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

{/* Sidebar */}

Notes

setSearchQuery(e.target.value)} className="w-full pl-9 pr-3 py-2 bg-white border border-amber-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-amber-300" />

{filteredNotes.map((note) => ( ))}

{/* Editor */}

{currentNote && ( <> handleUpdateTitle(e.target.value)} />

handleUpdateContent(e.target.value)}
            />
          </>
        )}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/macos-sonoma-abstract-colorful-wallpaper.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/macos-sonoma-abstract-colorful-wallpaper-jErFksuCOk5kktivXqz0njy6DCZF6V.jpg" isMerged="true"
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "15.5.4",
    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.1.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.9",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="components/spotlight.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { Search, Calculator, Calendar, Folder, Music, ImageIcon, FileText } from "lucide-react"
import type { AppType } from "./macos-desktop"

interface SpotlightProps {
  onClose: () => void
  onOpenApp: (app: AppType, title: string) => void
}

const searchResults = [
  { icon: Folder, label: "Documents", type: "Folder", action: () => {} },
  { icon: FileText, label: "Project Proposal.pdf", type: "PDF Document", action: () => {} },
  { icon: ImageIcon, label: "Vacation Photos", type: "Folder", action: () => {} },
  { icon: Music, label: "Favorite Playlist", type: "Music", action: () => {} },
  { icon: Calculator, label: "Calculator", type: "Application", action: () => {} },
  { icon: Calendar, label: "Calendar", type: "Application", action: () => {} },
]

export function Spotlight({ onClose, onOpenApp }: SpotlightProps) {
  const [query, setQuery] = useState("")
  const [selectedIndex, setSelectedIndex] = useState(0)
  const inputRef = useRef<HTMLInputElement>(null)

useEffect(() => {
    inputRef.current?.focus()
  }, [])

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault()
      setSelectedIndex((prev) => (prev + 1) % searchResults.length)
    } else if (e.key === "ArrowUp") {
      e.preventDefault()
      setSelectedIndex((prev) => (prev - 1 + searchResults.length) % searchResults.length)
    } else if (e.key === "Enter") {
      searchResults[selectedIndex].action()
      onClose()
    }
  }

return (
    <div
      className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[100] flex items-start justify-center pt-32"
      onClick={onClose}
    >
      <div
        className="w-[600px] bg-white/95 macos-blur rounded-xl shadow-2xl overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Search input */}
        <div className="flex items-center gap-3 p-4 border-b border-gray-200">
          <Search className="w-5 h-5 text-gray-400" />
          <input
            ref={inputRef}
            type="text"
            placeholder="Spotlight Search"
            className="flex-1 bg-transparent outline-none text-lg"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyDown={handleKeyDown}
          />
        </div>

{/* Results */}
        <div className="max-h-[400px] overflow-auto">
          {searchResults
            .filter((result) => result.label.toLowerCase().includes(query.toLowerCase()))
            .map((result, index) => {
              const IconComponent = result.icon
              return (
                <button
                  key={index}
                  className={`w-full flex items-center gap-3 px-4 py-3 transition-colors ${
                    index === selectedIndex ? "bg-blue-500 text-white" : "hover:bg-gray-100"
                  }`}
                  onClick={() => {
                    result.action()
                    onClose()
                  }}
                >
                  <IconComponent className="w-5 h-5" />
                  <div className="flex-1 text-left">
                    <div className="font-medium">{result.label}</div>
                    <div className={`text-xs ${index === selectedIndex ? "text-white/80" : "text-gray-500"}`}>
                      {result.type}
                    </div>
                  </div>
                </button>
              )
            })}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/context-menu.tsx" isMerged="true"
"use client"

interface ContextMenuProps {
  x: number
  y: number
  items: Array<{ label: string; action: () => void; divider?: boolean }>
}

export function ContextMenu({ x, y, items }: ContextMenuProps) {
  return (
    <div
      className="fixed bg-[var(--macos-menu-bg)] macos-blur border border-black/10 rounded-lg shadow-lg py-1 z-[60] min-w-[200px]"
      style={{ left: x, top: y }}
      onClick={(e) => e.stopPropagation()}
    >
      {items.map((item, index) =>
        item.divider ? (
          <div key={index} className="h-px bg-black/10 my-1" />
        ) : (
          <button
            key={index}
            className="w-full px-4 py-1.5 text-left text-sm hover:bg-blue-500 hover:text-white transition-colors"
            onClick={item.action}
          >
            {item.label}
          </button>
        ),
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/notification-center.tsx" isMerged="true"
"use client"

import { Calendar, Mail, MessageSquare, X } from "lucide-react"

interface NotificationCenterProps {
  onClose: () => void
}

const notifications = [
  {
    icon: Mail,
    app: "Mail",
    title: "New message from John",
    message: "Hey, can we meet tomorrow?",
    time: "5 min ago",
  },
  {
    icon: Calendar,
    app: "Calendar",
    title: "Meeting in 30 minutes",
    message: "Team standup at 2:00 PM",
    time: "25 min ago",
  },
  {
    icon: MessageSquare,
    app: "Messages",
    title: "Sarah sent you a message",
    message: "Thanks for your help!",
    time: "1 hour ago",
  },
]

export function NotificationCenter({ onClose }: NotificationCenterProps) {
  return (
    <div className="fixed top-7 right-0 w-[380px] h-[calc(100vh-7rem)] bg-white/95 macos-blur border-l border-gray-200 shadow-2xl z-[60] flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <h2 className="font-semibold text-lg">Notification Center</h2>
        <button onClick={onClose} className="hover:bg-gray-200 p-1 rounded transition-colors">
          <X className="w-5 h-5" />
        </button>
      </div>

{/* Notifications */}
      <div className="flex-1 overflow-auto p-4 space-y-3">
        {notifications.map((notification, index) => (
          <div
            key={index}
            className="bg-white rounded-lg p-4 shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
          >
            <div className="flex items-start gap-3">
              <div className="w-10 h-10 rounded-lg bg-blue-500 flex items-center justify-center text-white">
                <notification.icon className="w-5 h-5" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between mb-1">
                  <span className="font-semibold text-sm">{notification.app}</span>
                  <span className="text-xs text-gray-500">{notification.time}</span>
                </div>
                <div className="font-medium text-sm mb-1">{notification.title}</div>
                <div className="text-sm text-gray-600">{notification.message}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

{/* Widgets section */}
      <div className="border-t border-gray-200 p-4">
        <div className="text-xs font-semibold text-gray-500 mb-3">WIDGETS</div>
        <div className="bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg p-4 text-white">
          <div className="text-sm font-semibold mb-1">Weather</div>
          <div className="text-2xl font-bold">72°F</div>
          <div className="text-xs opacity-80">Partly Cloudy</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { MacOSDesktop } from "@/components/macos-desktop"
import { BootScreen } from "@/components/boot-screen"

export default function Home() {
  const [isBooting, setIsBooting] = useState(true)

useEffect(() => {
    const timer = setTimeout(() => {
      setIsBooting(false)
    }, 3000)

return () => clearTimeout(timer)
  }, [])

if (isBooting) {
    return <BootScreen />
  }

return <MacOSDesktop />
}
[V0_FILE]typescriptreact:file="components/boot-screen.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function BootScreen() {
  const [progress, setProgress] = useState(0)

useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval)
          return 100
        }
        return prev + 2
      })
    }, 30)

return () => clearInterval(interval)
  }, [])

return (
    <div className="h-screen w-screen bg-black flex flex-col items-center justify-center">
      <div className="animate-fade-in">
        <svg width="96" height="96" viewBox="0 0 814 1000" fill="white" xmlns="http://www.w3.org/2000/svg">
          <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
        </svg>
      </div>

{/* Progress bar */}
      <div className="mt-16 w-64 h-1 bg-gray-800 rounded-full overflow-hidden">
        <div
          className="h-full bg-white rounded-full transition-all duration-300 ease-out"
          style={{ width: `${progress}%` }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/window.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect, useCallback, type ReactNode } from "react"
import { Maximize2, Minimize2 } from "lucide-react"

interface WindowProps {
  id: string
  title: string
  children: ReactNode
  position: { x: number; y: number }
  size: { width: number; height: number }
  zIndex: number
  isMaximized: boolean
  onClose: () => void
  onMinimize: () => void
  onMaximize: () => void
  onFocus: () => void
  onPositionChange: (position: { x: number; y: number }) => void
  onSizeChange: (size: { width: number; height: number }) => void
}

export function Window({
  id,
  title,
  children,
  position,
  size,
  zIndex,
  isMaximized,
  onClose,
  onMinimize,
  onMaximize,
  onFocus,
  onPositionChange,
  onSizeChange,
}: WindowProps) {
  const [isDragging, setIsDragging] = useState(false)
  const [isResizing, setIsResizing] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const [showControls, setShowControls] = useState(false)
  const [isAnimating, setIsAnimating] = useState(true)
  const windowRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const timer = setTimeout(() => setIsAnimating(false), 300)
    return () => clearTimeout(timer)
  }, [])

const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (isDragging && !isMaximized) {
        requestAnimationFrame(() => {
          onPositionChange({
            x: e.clientX - dragStart.x,
            y: Math.max(28, e.clientY - dragStart.y),
          })
        })
      }
      if (isResizing && !isMaximized) {
        requestAnimationFrame(() => {
          onSizeChange({
            width: Math.max(400, e.clientX - position.x),
            height: Math.max(300, e.clientY - position.y),
          })
        })
      }
    },
    [isDragging, isResizing, dragStart, position, isMaximized, onPositionChange, onSizeChange],
  )

const handleMouseUp = useCallback(() => {
    setIsDragging(false)
    setIsResizing(false)
  }, [])

useEffect(() => {
    if (isDragging || isResizing) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDragging, isResizing, handleMouseMove, handleMouseUp])

const handleMouseDown = (e: React.MouseEvent) => {
    if (e.target === e.currentTarget || (e.target as HTMLElement).closest(".window-titlebar")) {
      onFocus()
      setIsDragging(true)
      setDragStart({
        x: e.clientX - position.x,
        y: e.clientY - position.y,
      })
    }
  }

const handleResizeMouseDown = (e: React.MouseEvent) => {
    e.stopPropagation()
    onFocus()
    setIsResizing(true)
  }

return (
    <div
      ref={windowRef}
      className={`absolute macos-window-shadow rounded-lg overflow-hidden bg-white transition-all duration-200 ${
        isAnimating ? "animate-scale-in opacity-0" : "opacity-100"
      } ${isDragging ? "cursor-grabbing" : ""}`}
      style={{
        left: position.x,
        top: position.y,
        width: size.width,
        height: size.height,
        zIndex,
        willChange: isDragging || isResizing ? "transform" : "auto",
      }}
      onMouseDown={() => onFocus()}
      onMouseEnter={() => setShowControls(true)}
      onMouseLeave={() => setShowControls(false)}
    >
      {/* Title bar */}
      <div
        className="window-titlebar h-11 bg-[var(--macos-menu-bg)] macos-blur border-b border-gray-200 flex items-center justify-between px-4 cursor-move select-none group"
        onMouseDown={handleMouseDown}
        onDoubleClick={onMaximize}
      >
        <div className="flex items-center gap-2">
          <button
            className={`w-3 h-3 rounded-full bg-[#FF5F57] hover:bg-[#FF5F57]/80 transition-all flex items-center justify-center ${
              showControls ? "opacity-100" : "opacity-60"
            }`}
            onClick={onClose}
          >
            {showControls && <span className="text-[8px] text-red-900">✕</span>}
          </button>
          <button
            className={`w-3 h-3 rounded-full bg-[#FEBC2E] hover:bg-[#FEBC2E]/80 transition-all flex items-center justify-center ${
              showControls ? "opacity-100" : "opacity-60"
            }`}
            onClick={onMinimize}
          >
            {showControls && <Minimize2 className="w-2 h-2 text-yellow-900" />}
          </button>
          <button
            className={`w-3 h-3 rounded-full bg-[#28C840] hover:bg-[#28C840]/80 transition-all flex items-center justify-center ${
              showControls ? "opacity-100" : "opacity-60"
            }`}
            onClick={onMaximize}
          >
            {showControls && <Maximize2 className="w-2 h-2 text-green-900" />}
          </button>
        </div>
        <div className="absolute left-1/2 -translate-x-1/2 text-sm font-medium text-gray-700">{title}</div>
      </div>

{/* Content */}
      <div className="h-[calc(100%-44px)] overflow-auto bg-white">{children}</div>

{/* Resize handle */}
      {!isMaximized && (
        <div className="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize" onMouseDown={handleResizeMouseDown} />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/docker.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Container, Play, Square, Trash2, RefreshCw } from "lucide-react"

interface DockerContainer {
  id: string
  name: string
  image: string
  status: "running" | "stopped"
  ports: string
}

export function Docker() {
  const [containers, setContainers] = useState<DockerContainer[]>([
    { id: "a1b2c3d4", name: "web-app", image: "nginx:latest", status: "running", ports: "80:80" },
    { id: "e5f6g7h8", name: "database", image: "postgres:15", status: "running", ports: "5432:5432" },
    { id: "i9j0k1l2", name: "redis-cache", image: "redis:alpine", status: "stopped", ports: "6379:6379" },
  ])

const toggleContainer = (id: string) => {
    setContainers(
      containers.map((c) => (c.id === id ? { ...c, status: c.status === "running" ? "stopped" : "running" } : c)),
    )
  }

return (
    <div className="h-full bg-white">
      {/* Header */}
      <div className="h-14 border-b border-gray-200 flex items-center justify-between px-6">
        <div className="flex items-center gap-3">
          <Container className="w-6 h-6 text-blue-500" />
          <h2 className="text-lg font-semibold text-gray-800">Docker Desktop</h2>
        </div>
        <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
          <RefreshCw className="w-4 h-4" />
          Refresh
        </button>
      </div>

{/* Stats */}
      <div className="grid grid-cols-3 gap-4 p-6 border-b border-gray-200">
        <div className="bg-green-50 rounded-lg p-4">
          <div className="text-2xl font-bold text-green-600">
            {containers.filter((c) => c.status === "running").length}
          </div>
          <div className="text-sm text-gray-600">Running</div>
        </div>
        <div className="bg-gray-50 rounded-lg p-4">
          <div className="text-2xl font-bold text-gray-600">
            {containers.filter((c) => c.status === "stopped").length}
          </div>
          <div className="text-sm text-gray-600">Stopped</div>
        </div>
        <div className="bg-blue-50 rounded-lg p-4">
          <div className="text-2xl font-bold text-blue-600">{containers.length}</div>
          <div className="text-sm text-gray-600">Total</div>
        </div>
      </div>

{/* Containers list */}
      <div className="p-6">
        <h3 className="text-sm font-semibold text-gray-700 mb-4">CONTAINERS</h3>
        <div className="space-y-2">
          {containers.map((container) => (
            <div
              key={container.id}
              className="flex items-center justify-between p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <div className="flex items-center gap-4">
                <div
                  className={`w-3 h-3 rounded-full ${container.status === "running" ? "bg-green-500" : "bg-gray-400"}`}
                />
                <div>
                  <div className="font-semibold text-gray-800">{container.name}</div>
                  <div className="text-sm text-gray-500">
                    {container.image} • {container.ports}
                  </div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => toggleContainer(container.id)}
                  className="p-2 hover:bg-gray-200 rounded transition-colors"
                  title={container.status === "running" ? "Stop" : "Start"}
                >
                  {container.status === "running" ? (
                    <Square className="w-4 h-4 text-red-500" />
                  ) : (
                    <Play className="w-4 h-4 text-green-500" />
                  )}
                </button>
                <button className="p-2 hover:bg-gray-200 rounded transition-colors" title="Delete">
                  <Trash2 className="w-4 h-4 text-gray-500" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/git-bash.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { GitBranch, GitCommit } from "lucide-react"

export function GitBash() {
  const [activeTab, setActiveTab] = useState<"status" | "log" | "branches">("status")

const commits = [
    { hash: "a1b2c3d", message: "Add new feature", author: "John Doe", date: "2 hours ago" },
    { hash: "e4f5g6h", message: "Fix bug in authentication", author: "Jane Smith", date: "5 hours ago" },
    { hash: "i7j8k9l", message: "Update dependencies", author: "John Doe", date: "1 day ago" },
    { hash: "m0n1o2p", message: "Refactor code structure", author: "Jane Smith", date: "2 days ago" },
  ]

const branches = [
    { name: "main", current: true, lastCommit: "2 hours ago" },
    { name: "develop", current: false, lastCommit: "1 day ago" },
    { name: "feature/new-ui", current: false, lastCommit: "3 days ago" },
  ]

return (
    <div className="h-full bg-[#0d1117] text-gray-300">
      {/* Header */}
      <div className="h-14 border-b border-gray-800 flex items-center justify-between px-6">
        <div className="flex items-center gap-3">
          <GitBranch className="w-6 h-6 text-orange-500" />
          <h2 className="text-lg font-semibold text-white">Git Repository</h2>
        </div>
        <div className="flex items-center gap-2 text-sm">
          <GitBranch className="w-4 h-4" />
          <span className="text-orange-400">main</span>
        </div>
      </div>

{/* Tabs */}
      <div className="flex border-b border-gray-800">
        <button
          onClick={() => setActiveTab("status")}
          className={`px-6 py-3 text-sm font-medium transition-colors ${
            activeTab === "status" ? "text-white border-b-2 border-orange-500" : "text-gray-400 hover:text-white"
          }`}
        >
          Status
        </button>
        <button
          onClick={() => setActiveTab("log")}
          className={`px-6 py-3 text-sm font-medium transition-colors ${
            activeTab === "log" ? "text-white border-b-2 border-orange-500" : "text-gray-400 hover:text-white"
          }`}
        >
          Commit Log
        </button>
        <button
          onClick={() => setActiveTab("branches")}
          className={`px-6 py-3 text-sm font-medium transition-colors ${
            activeTab === "branches" ? "text-white border-b-2 border-orange-500" : "text-gray-400 hover:text-white"
          }`}
        >
          Branches
        </button>
      </div>

{/* Content */}
      <div className="p-6">
        {activeTab === "status" && (
          <div className="space-y-4">
            <div className="bg-[#161b22] rounded-lg p-4 border border-gray-800">
              <div className="flex items-center gap-2 mb-3">
                <GitCommit className="w-5 h-5 text-green-500" />
                <h3 className="font-semibold text-white">Working Directory</h3>
              </div>
              <div className="space-y-2 text-sm">
                <div className="text-green-400">✓ All changes committed</div>
                <div className="text-gray-400">Your branch is up to date with 'origin/main'</div>
              </div>
            </div>

<div className="bg-[#161b22] rounded-lg p-4 border border-gray-800">
              <h3 className="font-semibold text-white mb-3">Quick Actions</h3>
              <div className="grid grid-cols-2 gap-2">
                <button className="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors text-sm">
                  Pull Changes
                </button>
                <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors text-sm">
                  Push Changes
                </button>
                <button className="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors text-sm">
                  Create Branch
                </button>
                <button className="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors text-sm">
                  Merge Branch
                </button>
              </div>
            </div>
          </div>
        )}

{activeTab === "log" && (
          <div className="space-y-3">
            {commits.map((commit) => (
              <div key={commit.hash} className="bg-[#161b22] rounded-lg p-4 border border-gray-800">
                <div className="flex items-start gap-3">
                  <GitCommit className="w-5 h-5 text-orange-500 mt-1" />
                  <div className="flex-1">
                    <div className="font-semibold text-white mb-1">{commit.message}</div>
                    <div className="text-sm text-gray-400">
                      {commit.author} • {commit.hash} • {commit.date}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}

{activeTab === "branches" && (
          <div className="space-y-3">
            {branches.map((branch) => (
              <div key={branch.name} className="bg-[#161b22] rounded-lg p-4 border border-gray-800">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <GitBranch className="w-5 h-5 text-orange-500" />
                    <div>
                      <div className="font-semibold text-white flex items-center gap-2">
                        {branch.name}
                        {branch.current && (
                          <span className="px-2 py-0.5 bg-orange-500 text-white text-xs rounded">Current</span>
                        )}
                      </div>
                      <div className="text-sm text-gray-400">Last commit: {branch.lastCommit}</div>
                    </div>
                  </div>
                  {!branch.current && (
                    <button className="px-3 py-1 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors text-sm">
                      Checkout
                    </button>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/desktop-icon.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback } from "react"

interface DesktopIconProps {
  icon: string | React.ComponentType
  label: string
  onDoubleClick: () => void
}

export function DesktopIcon({ icon, label, onDoubleClick }: DesktopIconProps) {
  const [clicks, setClicks] = useState(0)
  const [isSelected, setIsSelected] = useState(false)

const handleClick = useCallback(() => {
    setIsSelected(true)
    const newClicks = clicks + 1
    setClicks(newClicks)

if (newClicks === 2) {
      // Double click detected
      onDoubleClick()
      setIsSelected(false)
      setClicks(0)
    } else {
      // Reset after timeout
      setTimeout(() => {
        setClicks(0)
      }, 300)
    }
  }, [clicks, onDoubleClick])

const IconComponent = typeof icon === "string" ? null : icon

return (
    <button
      className={`flex flex-col items-center gap-1 p-2 rounded-lg transition-colors ${
        isSelected ? "bg-blue-500/30" : "hover:bg-white/20"
      }`}
      onClick={handleClick}
    >
      {IconComponent ? (
        <div className="w-16 h-16">
          <IconComponent />
        </div>
      ) : (
        <div className="text-5xl">{icon}</div>
      )}
      <span className="text-xs font-medium text-white drop-shadow-lg text-center">{label}</span>
    </button>
  )
}
[V0_FILE]typescriptreact:file="components/apps/settings.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Wifi, Bluetooth, Bell, Lock, Palette, Monitor, User, HardDrive, Network, Volume2 } from "lucide-react"

const settingsCategories = [
  { icon: Wifi, label: "Wi-Fi", description: "Connected to Home Network" },
  { icon: Bluetooth, label: "Bluetooth", description: "On" },
  { icon: Network, label: "Network", description: "Configure network settings" },
  { icon: Bell, label: "Notifications", description: "Manage app notifications" },
  { icon: Volume2, label: "Sound", description: "Adjust system sounds" },
  { icon: Lock, label: "Privacy & Security", description: "Protect your data" },
  { icon: Palette, label: "Appearance", description: "Light mode" },
  { icon: Monitor, label: "Displays", description: "Built-in Retina Display" },
  { icon: User, label: "Users & Groups", description: "Manage user accounts" },
  { icon: HardDrive, label: "Storage", description: "256 GB available" },
]

export function Settings() {
  const [selectedCategory, setSelectedCategory] = useState("Wi-Fi")

const renderContent = () => {
    switch (selectedCategory) {
      case "Wi-Fi":
        return (
          <>
            <h1 className="text-3xl font-bold mb-2">Wi-Fi</h1>
            <p className="text-gray-600 mb-8">Configure your wireless network settings</p>
            <div className="space-y-6">
              <div className="bg-white rounded-lg border border-gray-200 p-6">
                <div className="flex items-center justify-between mb-4">
                  <span className="font-semibold">Wi-Fi</span>
                  <button className="px-4 py-1 bg-blue-500 text-white rounded-full text-sm hover:bg-blue-600 transition-colors">
                    On
                  </button>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                    <div>
                      <div className="font-medium">Home Network</div>
                      <div className="text-sm text-gray-600">Connected</div>
                    </div>
                    <Wifi className="w-5 h-5 text-blue-500" />
                  </div>
                  <div className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
                    <div>
                      <div className="font-medium">Office WiFi</div>
                      <div className="text-sm text-gray-600">Saved</div>
                    </div>
                  </div>
                  <div className="flex items-center justify-between p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
                    <div>
                      <div className="font-medium">Guest Network</div>
                      <div className="text-sm text-gray-600">Available</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        )
      case "Bluetooth":
        return (
          <>
            <h1 className="text-3xl font-bold mb-2">Bluetooth</h1>
            <p className="text-gray-600 mb-8">Connect to wireless devices</p>
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <div className="flex items-center justify-between mb-4">
                <span className="font-semibold">Bluetooth</span>
                <button className="px-4 py-1 bg-blue-500 text-white rounded-full text-sm">On</button>
              </div>
              <div className="space-y-3">
                <div className="p-3 bg-blue-50 rounded-lg">
                  <div className="font-medium">AirPods Pro</div>
                  <div className="text-sm text-gray-600">Connected</div>
                </div>
                <div className="p-3 hover:bg-gray-50 rounded-lg cursor-pointer">
                  <div className="font-medium">Magic Keyboard</div>
                  <div className="text-sm text-gray-600">Not Connected</div>
                </div>
              </div>
            </div>
          </>
        )
      case "Appearance":
        return (
          <>
            <h1 className="text-3xl font-bold mb-2">Appearance</h1>
            <p className="text-gray-600 mb-8">Customize the look of your Mac</p>
            <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-6">
              <div>
                <div className="font-semibold mb-3">Appearance</div>
                <div className="flex gap-4">
                  <button className="flex-1 p-4 border-2 border-blue-500 rounded-lg bg-white">
                    <div className="text-sm font-medium">Light</div>
                  </button>
                  <button className="flex-1 p-4 border-2 border-gray-200 rounded-lg bg-gray-900">
                    <div className="text-sm font-medium text-white">Dark</div>
                  </button>
                  <button className="flex-1 p-4 border-2 border-gray-200 rounded-lg bg-gradient-to-b from-white to-gray-900">
                    <div className="text-sm font-medium">Auto</div>
                  </button>
                </div>
              </div>
              <div>
                <div className="font-semibold mb-3">Accent Color</div>
                <div className="flex gap-2">
                  {["blue", "purple", "pink", "red", "orange", "yellow", "green"].map((color) => (
                    <button
                      key={color}
                      className={`w-8 h-8 rounded-full bg-${color}-500 hover:scale-110 transition-transform`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </>
        )
      case "Displays":
        return (
          <>
            <h1 className="text-3xl font-bold mb-2">Displays</h1>
            <p className="text-gray-600 mb-8">Adjust resolution, brightness, and arrangement</p>
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <div className="aspect-video bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg mb-6 flex items-center justify-center">
                <Monitor className="w-24 h-24 text-white opacity-50" />
              </div>
              <div className="space-y-4">
                <div>
                  <div className="flex justify-between mb-2">
                    <span className="text-sm font-medium">Brightness</span>
                    <span className="text-sm text-gray-600">75%</span>
                  </div>
                  <input type="range" className="w-full" defaultValue="75" />
                </div>
                <div>
                  <div className="text-sm font-medium mb-2">Resolution</div>
                  <select className="w-full p-2 border border-gray-300 rounded">
                    <option>Default for display</option>
                    <option>1920 × 1080</option>
                    <option>2560 × 1440</option>
                    <option>3840 × 2160</option>
                  </select>
                </div>
              </div>
            </div>
          </>
        )
      default:
        return (
          <>
            <h1 className="text-3xl font-bold mb-2">{selectedCategory}</h1>
            <p className="text-gray-600 mb-8">Configure {selectedCategory.toLowerCase()} settings</p>
            <div className="bg-white rounded-lg border border-gray-200 p-6">
              <p className="text-gray-600">Settings for {selectedCategory} will appear here.</p>
            </div>
          </>
        )
    }
  }

return (
    <div className="flex h-full bg-gray-50">
      {/* Sidebar */}
      <div className="w-64 bg-white border-r border-gray-200 p-4">
        <div className="space-y-1">
          {settingsCategories.map((category) => (
            <button
              key={category.label}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded transition-colors text-left ${
                selectedCategory === category.label ? "bg-blue-100 text-blue-600" : "hover:bg-gray-100"
              }`}
              onClick={() => setSelectedCategory(category.label)}
            >
              <category.icon
                className={`w-5 h-5 ${selectedCategory === category.label ? "text-blue-500" : "text-gray-600"}`}
              />
              <span className="text-sm font-medium">{category.label}</span>
            </button>
          ))}
        </div>
      </div>

{/* Main content */}
      <div className="flex-1 p-8 overflow-auto">{renderContent()}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/safari.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, ChevronRight, RotateCw, Share, Plus, X, Lock, Star, Download } from "lucide-react"

export function Safari() {
  const [url, setUrl] = useState("https://www.apple.com")
  const [tabs, setTabs] = useState([
    { id: 1, title: "Apple", url: "https://www.apple.com", active: true, favicon: "🍎" },
    { id: 2, title: "GitHub", url: "https://github.com", active: false, favicon: "🐙" },
  ])
  const [activeTab, setActiveTab] = useState(1)

const favorites = [
    { name: "Apple", color: "from-gray-700 to-gray-900", favicon: "🍎" },
    { name: "GitHub", color: "from-gray-800 to-black", favicon: "🐙" },
    { name: "Twitter", color: "from-blue-400 to-blue-600", favicon: "🐦" },
    { name: "YouTube", color: "from-red-500 to-red-700", favicon: "▶️" },
    { name: "Reddit", color: "from-orange-500 to-red-600", favicon: "🤖" },
    { name: "Netflix", color: "from-red-600 to-black", favicon: "N" },
    { name: "Amazon", color: "from-yellow-400 to-orange-500", favicon: "📦" },
    { name: "LinkedIn", color: "from-blue-600 to-blue-800", favicon: "💼" },
  ]

const closeTab = (id: number) => {
    if (tabs.length > 1) {
      setTabs(tabs.filter((tab) => tab.id !== id))
      if (activeTab === id) {
        setActiveTab(tabs[0].id)
      }
    }
  }

const addTab = () => {
    const newTab = {
      id: Date.now(),
      title: "New Tab",
      url: "https://www.apple.com",
      active: false,
      favicon: "🍎",
    }
    setTabs([...tabs, newTab])
    setActiveTab(newTab.id)
  }

return (
    <div className="flex flex-col h-full bg-white">
      {/* Tab bar */}
      <div className="h-10 bg-[#e8e8e8] border-b border-gray-300 flex items-center px-2 gap-1">
        {tabs.map((tab) => (
          <div
            key={tab.id}
            className={`group h-8 px-3 rounded-t flex items-center gap-2 min-w-[120px] max-w-[200px] cursor-pointer ${
              activeTab === tab.id ? "bg-white shadow-sm" : "bg-[#d4d4d4] hover:bg-[#c8c8c8]"
            }`}
            onClick={() => setActiveTab(tab.id)}
          >
            <span className="text-sm">{tab.favicon}</span>
            <span className="text-xs flex-1 truncate">{tab.title}</span>
            <button
              className="opacity-0 group-hover:opacity-100 hover:bg-gray-200 rounded p-0.5"
              onClick={(e) => {
                e.stopPropagation()
                closeTab(tab.id)
              }}
            >
              <X className="w-3 h-3" />
            </button>
          </div>
        ))}
        <button className="w-8 h-8 flex items-center justify-center hover:bg-gray-200 rounded" onClick={addTab}>
          <Plus className="w-4 h-4 text-gray-600" />
        </button>
      </div>

{/* Toolbar */}
      <div className="h-12 bg-white border-b border-gray-200 flex items-center px-3 gap-2">
        <div className="flex items-center gap-1">
          <button className="p-1.5 hover:bg-gray-100 rounded transition-colors">
            <ChevronLeft className="w-5 h-5 text-gray-600" />
          </button>
          <button className="p-1.5 hover:bg-gray-100 rounded transition-colors">
            <ChevronRight className="w-5 h-5 text-gray-400" />
          </button>
        </div>

<div className="flex-1 flex items-center gap-2 bg-[#f5f5f7] hover:bg-[#e8e8ed] rounded-lg px-4 py-2 transition-colors">
          <Lock className="w-4 h-4 text-gray-500" />
          <input
            type="text"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            className="flex-1 bg-transparent outline-none text-sm text-gray-700"
          />
          <RotateCw className="w-4 h-4 text-gray-500 cursor-pointer hover:text-gray-700" />
        </div>

{/* Favorites bar */}
      <div className="h-10 bg-[#fafafa] border-b border-gray-200 flex items-center px-4 gap-4 overflow-x-auto">
        {favorites.map((fav) => (
          <button
            key={fav.name}
            className="flex items-center gap-2 px-2 py-1 hover:bg-gray-100 rounded transition-colors shrink-0"
          >
            <span className="text-sm">{fav.favicon}</span>
            <span className="text-xs text-gray-700">{fav.name}</span>
          </button>
        ))}
      </div>

{/* Content */}
      <div className="flex-1 overflow-auto bg-white">
        <div className="max-w-5xl mx-auto p-8 md:p-16">
          <div className="text-center space-y-8">
            <div className="space-y-4">
              <h1 className="text-4xl md:text-7xl font-semibold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                Safari
              </h1>
              <p className="text-lg md:text-xl text-gray-600">Fast. Private. Energy efficient.</p>
            </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mt-16">
              {favorites.map((site) => (
                <button
                  key={site.name}
                  className="group aspect-square rounded-2xl bg-gradient-to-br from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200 flex flex-col items-center justify-center gap-3 transition-all hover:scale-105 shadow-sm hover:shadow-md"
                >
                  <div className="text-4xl md:text-5xl">{site.favicon}</div>
                  <span className="text-xs md:text-sm font-medium text-gray-700">{site.name}</span>
                </button>
              ))}
            </div>

<div className="mt-16 p-6 md:p-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-3xl">
              <Star className="w-10 h-10 md:w-12 md:h-12 mx-auto mb-4 text-blue-600" />
              <h2 className="text-xl md:text-2xl font-semibold mb-2">Privacy. That's Safari.</h2>
              <p className="text-sm md:text-base text-gray-600">
                Safari is designed to protect your information and enable you to choose what you share.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/messages.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Send, Phone, Video, Info } from "lucide-react"

const conversations = [
  { id: 1, name: "Sarah Johnson", lastMessage: "See you tomorrow!", time: "2:30 PM", unread: 2, avatar: "👩" },
  { id: 2, name: "Work Team", lastMessage: "Meeting at 3 PM", time: "1:15 PM", unread: 0, avatar: "👥" },
  { id: 3, name: "Mom", lastMessage: "Love you! ❤️", time: "Yesterday", unread: 0, avatar: "👩‍🦳" },
  { id: 4, name: "Alex Chen", lastMessage: "Thanks for the help", time: "Monday", unread: 0, avatar: "👨" },
  { id: 5, name: "Emily Davis", lastMessage: "Sounds good!", time: "Sunday", unread: 0, avatar: "👩‍🦰" },
]

const messagesByConversation: Record<number, Array<{ id: number; text: string; sent: boolean; time: string }>> = {
  1: [
    { id: 1, text: "Hey! How are you?", sent: false, time: "2:15 PM" },
    { id: 2, text: "I'm good! Just finished the project", sent: true, time: "2:20 PM" },
    { id: 3, text: "That's awesome! Want to grab coffee?", sent: false, time: "2:25 PM" },
    { id: 4, text: "See you tomorrow!", sent: true, time: "2:30 PM" },
  ],
  2: [
    { id: 1, text: "Don't forget about the meeting", sent: false, time: "1:00 PM" },
    { id: 2, text: "Meeting at 3 PM", sent: false, time: "1:15 PM" },
  ],
  3: [
    { id: 1, text: "How was your day?", sent: false, time: "Yesterday" },
    { id: 2, text: "It was great! Thanks for asking", sent: true, time: "Yesterday" },
    { id: 3, text: "Love you! ❤️", sent: false, time: "Yesterday" },
  ],
  4: [{ id: 1, text: "Thanks for the help", sent: false, time: "Monday" }],
  5: [{ id: 1, text: "Sounds good!", sent: false, time: "Sunday" }],
}

export function Messages() {
  const [selectedConversation, setSelectedConversation] = useState(1)
  const [newMessage, setNewMessage] = useState("")
  const [messages, setMessages] = useState(messagesByConversation)

const handleSendMessage = () => {
    if (newMessage.trim()) {
      const newMsg = {
        id: Date.now(),
        text: newMessage,
        sent: true,
        time: new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" }),
      }
      setMessages({
        ...messages,
        [selectedConversation]: [...(messages[selectedConversation] || []), newMsg],
      })
      setNewMessage("")
    }
  }

return (
    <div className="flex h-full">
      {/* Conversations list */}
      <div className="w-full md:w-80 border-r border-gray-200 flex flex-col">
        <div className="p-4 border-b border-gray-200">
          <input
            type="text"
            placeholder="Search"
            className="w-full px-3 py-2 bg-gray-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="flex-1 overflow-auto">
          {conversations.map((conv) => (
            <button
              key={conv.id}
              className={`w-full p-4 flex items-start gap-3 hover:bg-gray-50 transition-colors border-b border-gray-100 ${
                selectedConversation === conv.id ? "bg-blue-50" : ""
              }`}
              onClick={() => setSelectedConversation(conv.id)}
            >
              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-2xl">
                {conv.avatar}
              </div>
              <div className="flex-1 text-left min-w-0">
                <div className="flex items-center justify-between mb-1">
                  <span className="font-semibold text-sm truncate">{conv.name}</span>
                  <span className="text-xs text-gray-500 shrink-0 ml-2">{conv.time}</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-600 truncate">{conv.lastMessage}</span>
                  {conv.unread > 0 && (
                    <span className="ml-2 px-2 py-0.5 bg-blue-500 text-white text-xs rounded-full shrink-0">
                      {conv.unread}
                    </span>
                  )}
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>

{/* Messages */}
      <div className="flex-1 flex flex-col">
        {/* Header */}
        <div className="h-14 border-b border-gray-200 flex items-center justify-between px-6">
          <span className="font-semibold">{conversations.find((c) => c.id === selectedConversation)?.name}</span>
          <div className="flex items-center gap-3">
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <Phone className="w-5 h-5 text-gray-600" />
            </button>
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <Video className="w-5 h-5 text-gray-600" />
            </button>
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <Info className="w-5 h-5 text-gray-600" />
            </button>
          </div>
        </div>

{/* Messages list */}
        <div className="flex-1 overflow-auto p-6 space-y-4">
          {(messages[selectedConversation] || []).map((message) => (
            <div key={message.id} className={`flex ${message.sent ? "justify-end" : "justify-start"}`}>
              <div className="flex flex-col max-w-xs md:max-w-md">
                <div
                  className={`px-4 py-2 rounded-2xl ${
                    message.sent ? "bg-blue-500 text-white rounded-br-sm" : "bg-gray-200 text-gray-900 rounded-bl-sm"
                  }`}
                >
                  <p className="text-sm break-words">{message.text}</p>
                </div>
                <span className={`text-xs text-gray-500 mt-1 ${message.sent ? "text-right" : "text-left"}`}>
                  {message.time}
                </span>
              </div>
            </div>
          ))}
        </div>

{/* Input */}
        <div className="border-t border-gray-200 p-4">
          <div className="flex items-center gap-2">
            <input
              type="text"
              placeholder="iMessage"
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
              className="flex-1 px-4 py-2 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
            <button
              onClick={handleSendMessage}
              className="p-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 transition-colors"
            >
              <Send className="w-5 h-5" />
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/terminal.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"

export function Terminal() {
  const [history, setHistory] = useState<string[]>([
    "Last login: " + new Date().toLocaleString(),
    "Welcome to macOS Terminal",
    "",
  ])
  const [currentCommand, setCurrentCommand] = useState("")
  const inputRef = useRef<HTMLInputElement>(null)
  const terminalRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    inputRef.current?.focus()
    if (terminalRef.current) {
      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
    }
  }, [history])

const executeCommand = (cmd: string) => {
    const trimmedCmd = cmd.trim()
    const args = trimmedCmd.split(" ")
    const command = args[0]
    let output = ""

switch (command) {
      case "ls":
        if (args.includes("-la") || args.includes("-l")) {
          output = `total 32
drwxr-xr-x  8 developer  staff   256 Dec 15 10:30 .
drwxr-xr-x  5 root       admin   160 Dec 10 09:00 ..
drwx------  3 developer  staff    96 Dec 15 10:30 Desktop
drwx------  4 developer  staff   128 Dec 14 15:20 Documents
drwx------  5 developer  staff   160 Dec 15 09:45 Downloads
drwx------  3 developer  staff    96 Dec 12 14:00 Music
drwx------  4 developer  staff   128 Dec 13 11:30 Pictures
drwx------  2 developer  staff    64 Dec 11 16:00 Videos`
        } else {
          output = "Desktop  Documents  Downloads  Music  Pictures  Videos"
        }
        break
      case "pwd":
        output = "/Users/developer"
        break
      case "whoami":
        output = "developer"
        break
      case "date":
        output = new Date().toString()
        break
      case "clear":
        setHistory([])
        return
      case "help":
        output =
          "Available commands:\n  ls [-la]     - list directory contents\n  pwd          - print working directory\n  whoami       - print current user\n  date         - display current date and time\n  clear        - clear terminal screen\n  cat <file>   - display file contents\n  echo <text>  - print text to terminal\n  mkdir <dir>  - create directory\n  touch <file> - create file\n  rm <file>    - remove file\n  cd <dir>     - change directory\n  git          - git commands\n  npm          - npm commands\n  node         - node.js\n  python       - python interpreter\n  neofetch     - system information\n  help         - show this help message"
        break
      case "cat":
        if (args[1]) {
          output = `Contents of ${args[1]}:\nThis is a sample file content.`
        } else {
          output = "cat: missing file operand"
        }
        break
      case "echo":
        output = args.slice(1).join(" ")
        break
      case "mkdir":
        if (args[1]) {
          output = `Directory '${args[1]}' created`
        } else {
          output = "mkdir: missing operand"
        }
        break
      case "touch":
        if (args[1]) {
          output = `File '${args[1]}' created`
        } else {
          output = "touch: missing file operand"
        }
        break
      case "rm":
        if (args[1]) {
          output = `File '${args[1]}' removed`
        } else {
          output = "rm: missing operand"
        }
        break
      case "cd":
        if (args[1]) {
          output = `Changed directory to ${args[1]}`
        } else {
          output = "cd: missing directory operand"
        }
        break
      case "python":
      case "python3":
        if (args.includes("--version") || args.includes("-V")) {
          output = "Python 3.11.5"
        } else {
          output = "Python 3.11.5\nType 'help' for more information."
        }
        break
      case "neofetch":
        output = `
                    ###                  developer@macOS
                  ####                   ----------------
                 ###                     OS: macOS Sonoma 14.0
         #######    #######              Host: MacBook Pro (16-inch, 2023)
       ######################            Kernel: Darwin 23.0.0
      #####################              Uptime: 2 days, 5 hours
      ####################               Shell: zsh 5.9
      ####################               Resolution: 3456x2234
      #####################              DE: Aqua
       ######################            WM: Quartz Compositor
        ####################             Terminal: Terminal.app
          ################               CPU: Apple M3 Max
             ####     ####                GPU: Apple M3 Max
                                          Memory: 8192MB / 36864MB
        `
        break
      case "git":
        if (args.includes("status")) {
          output =
            "On branch main\nYour branch is up to date with 'origin/main'.\n\nnothing to commit, working tree clean"
        } else if (args.includes("branch")) {
          output = "* main\n  develop\n  feature/new-ui"
        } else if (args.includes("log")) {
          output =
            "commit a1b2c3d (HEAD -> main)\nAuthor: Developer <dev@example.com>\nDate:   " +
            new Date().toDateString() +
            "\n\n    Initial commit"
        } else if (args.includes("clone")) {
          output =
            "Cloning into 'repository'...\nremote: Counting objects: 100, done.\nReceiving objects: 100% (100/100), done."
        } else if (args.includes("pull")) {
          output = "Already up to date."
        } else if (args.includes("push")) {
          output = "Everything up-to-date"
        } else {
          output =
            "usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]\n           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]\n           [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]\n           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]\n           <command> [<args>]"
        }
        break
      case "npm":
        if (args.includes("--version") || args.includes("-v")) {
          output = "10.2.4"
        } else if (args.includes("install") || args.includes("i")) {
          output = "added 245 packages in 3s"
        } else if (args.includes("start")) {
          output = "> dev\n> next dev\n\n   ▲ Next.js 14.0.0\n   - Local:        http://localhost:3000"
        } else {
          output = "npm v10.2.4\n\nUsage: npm <command>"
        }
        break
      case "node":
        if (args.includes("--version") || args.includes("-v")) {
          output = "v20.10.0"
        } else {
          output = "Welcome to Node.js v20.10.0\nType '.help' for more information."
        }
        break
      case "":
        break
      default:
        output = `zsh: command not found: ${command}`
    }

setHistory([...history, `developer@macOS ~ % ${cmd}`, output])
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (currentCommand.trim()) {
      executeCommand(currentCommand)
      setCurrentCommand("")
    }
  }

return (
    <div
      ref={terminalRef}
      className="h-full bg-black text-green-400 font-mono text-xs md:text-sm p-4 overflow-auto cursor-text"
      onClick={() => inputRef.current?.focus()}
    >
      {history.map((line, i) => (
        <div key={i} className="leading-relaxed whitespace-pre-wrap break-all">
          {line}
        </div>
      ))}
      <form onSubmit={handleSubmit} className="flex items-center gap-2 flex-wrap">
        <span className="text-blue-400">developer@macOS</span>
        <span className="text-white">~</span>
        <span className="text-purple-400">%</span>
        <input
          ref={inputRef}
          type="text"
          value={currentCommand}
          onChange={(e) => setCurrentCommand(e.target.value)}
          className="flex-1 min-w-[200px] bg-transparent outline-none text-green-400"
          autoFocus
        />
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/photos.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Grid3x3, List, Heart, Share2 } from "lucide-react"

const photos = [
  { id: 1, url: "/mountain-sunset-landscape.jpg", title: "Mountain Sunset" },
  { id: 2, url: "/ocean-beach-waves.jpg", title: "Ocean Beach" },
  { id: 3, url: "/forest-trees-nature.png", title: "Forest Path" },
  { id: 4, url: "/city-skyline-night.png", title: "City Lights" },
  { id: 5, url: "/desert-sand-dunes.png", title: "Desert Dunes" },
  { id: 6, url: "/lush-waterfall.png", title: "Waterfall" },
  { id: 7, url: "/aurora-northern-lights.jpg", title: "Aurora" },
  { id: 8, url: "/cherry-blossom-spring.jpg", title: "Cherry Blossom" },
  { id: 9, url: "/lake-reflection-mountains.jpg", title: "Lake Reflection" },
  { id: 10, url: "/canyon-rock-formation.jpg", title: "Canyon" },
  { id: 11, url: "/tropical-island-beach.png", title: "Tropical Island" },
  { id: 12, url: "/snowy-mountain-peak.png", title: "Snowy Peak" },
]

export function Photos() {
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
  const [selectedPhoto, setSelectedPhoto] = useState<number | null>(null)

return (
    <div className="h-full flex flex-col bg-white">
      {/* Toolbar */}
      <div className="h-14 border-b border-gray-200 flex items-center justify-between px-6">
        <h1 className="text-lg font-semibold">All Photos</h1>
        <div className="flex items-center gap-2">
          <button
            className={`p-2 rounded transition-colors ${viewMode === "grid" ? "bg-blue-100 text-blue-600" : "hover:bg-gray-100"}`}
            onClick={() => setViewMode("grid")}
          >
            <Grid3x3 className="w-5 h-5" />
          </button>
          <button
            className={`p-2 rounded transition-colors ${viewMode === "list" ? "bg-blue-100 text-blue-600" : "hover:bg-gray-100"}`}
            onClick={() => setViewMode("list")}
          >
            <List className="w-5 h-5" />
          </button>
        </div>
      </div>

{/* Photo grid */}
      <div className="flex-1 overflow-auto p-4 md:p-6">
        <div
          className={
            viewMode === "grid" ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4" : "space-y-2"
          }
        >
          {photos.map((photo) => (
            <div
              key={photo.id}
              className={`group relative ${viewMode === "grid" ? "aspect-square" : "h-24 flex items-center gap-4"} rounded-lg overflow-hidden hover:scale-105 transition-transform cursor-pointer bg-gray-100`}
              onClick={() => setSelectedPhoto(photo.id)}
            >
              <img
                src={photo.url || "/placeholder.svg"}
                alt={photo.title}
                className={viewMode === "grid" ? "w-full h-full object-cover" : "h-full w-24 object-cover"}
              />
              {viewMode === "list" && <span className="text-sm font-medium">{photo.title}</span>}
              <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
                <button className="p-2 bg-white rounded-full hover:bg-gray-100 transition-colors">
                  <Heart className="w-4 h-4" />
                </button>
                <button className="p-2 bg-white rounded-full hover:bg-gray-100 transition-colors">
                  <Share2 className="w-4 h-4" />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/mountain-sunset-landscape.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mountain-sunset-landscape-CAjy0JzT8Yr7op8OlEbLhDJ9jPkMgm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/ocean-beach-waves.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ocean-beach-waves-ta1qk7qKKm4e52SrnTMMK6N62D9Bw1.jpg" isMerged="true"
[V0_FILE]png:file="public/forest-trees-nature.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/forest-trees-nature-c2YBNINqknSvtHQIAxcabVAURsuKlu.png" isMerged="true"
[V0_FILE]png:file="public/city-skyline-night.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/city-skyline-night-2j8LmiDfCZbCxVqKTpDXsx2owVsn2s.png" isMerged="true"
[V0_FILE]png:file="public/desert-sand-dunes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/desert-sand-dunes-OjmKavyXhrwyXxIG2YK7EtlPncCmvY.png" isMerged="true"
[V0_FILE]png:file="public/lush-waterfall.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lush-waterfall-P2GTs4xpeopKDpL1CTrdDeQvxkKtP8.png" isMerged="true"
[V0_FILE]jpg:file="public/aurora-northern-lights.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/aurora-northern-lights-5XAitaaYGGokjxY1UFmp6ZucRwdtj6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/cherry-blossom-spring.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/cherry-blossom-spring-Z0X8ZyjozZlbStm9J1o2ddY07ipFtL.jpg" isMerged="true"
[V0_FILE]jpg:file="public/lake-reflection-mountains.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/lake-reflection-mountains-SfrsZRdiXE1yZim1A7hBRzj52n1rPp.jpg" isMerged="true"
[V0_FILE]jpg:file="public/canyon-rock-formation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/canyon-rock-formation-7Plq3ZVZ8uN1OAIMS4XUllOlNyflOh.jpg" isMerged="true"
[V0_FILE]png:file="public/tropical-island-beach.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tropical-island-beach-qk1SjBsS0DNCi1kjXZOzRTuZcxEUlP.png" isMerged="true"
[V0_FILE]png:file="public/snowy-mountain-peak.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/snowy-mountain-peak-EBJBPgdqw80eLJochX520HuKTycVmL.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/widgets/clock-widget.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function ClockWidget() {
  const [time, setTime] = useState(new Date())

useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

const hours = time.getHours() % 12
  const minutes = time.getMinutes()
  const seconds = time.getSeconds()

const hourAngle = (hours + minutes / 60) * 30
  const minuteAngle = (minutes + seconds / 60) * 6
  const secondAngle = seconds * 6

return (
    <div className="bg-white/90 backdrop-blur-xl rounded-2xl p-4 shadow-lg">
      <div className="relative w-32 h-32">
        <svg viewBox="0 0 100 100" className="w-full h-full">
          {/* Clock face */}
          <circle cx="50" cy="50" r="48" fill="white" stroke="#e5e7eb" strokeWidth="2" />

{/* Hour markers */}
          {[...Array(12)].map((_, i) => {
            const angle = (i * 30 * Math.PI) / 180
            const x1 = 50 + 40 * Math.sin(angle)
            const y1 = 50 - 40 * Math.cos(angle)
            const x2 = 50 + 45 * Math.sin(angle)
            const y2 = 50 - 45 * Math.cos(angle)
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#9ca3af" strokeWidth="2" />
          })}

{/* Hour hand */}
          <line
            x1="50"
            y1="50"
            x2={50 + 25 * Math.sin((hourAngle * Math.PI) / 180)}
            y2={50 - 25 * Math.cos((hourAngle * Math.PI) / 180)}
            stroke="#1f2937"
            strokeWidth="3"
            strokeLinecap="round"
          />

{/* Minute hand */}
          <line
            x1="50"
            y1="50"
            x2={50 + 35 * Math.sin((minuteAngle * Math.PI) / 180)}
            y2={50 - 35 * Math.cos((minuteAngle * Math.PI) / 180)}
            stroke="#374151"
            strokeWidth="2"
            strokeLinecap="round"
          />

{/* Second hand */}
          <line
            x1="50"
            y1="50"
            x2={50 + 38 * Math.sin((secondAngle * Math.PI) / 180)}
            y2={50 - 38 * Math.cos((secondAngle * Math.PI) / 180)}
            stroke="#ef4444"
            strokeWidth="1"
            strokeLinecap="round"
          />

{/* Center dot */}
          <circle cx="50" cy="50" r="3" fill="#1f2937" />
        </svg>
      </div>
      <div className="text-center mt-2 text-sm font-medium text-gray-700">{time.toLocaleTimeString()}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/widgets/calendar-widget.tsx" isMerged="true"
"use client"

export function CalendarWidget() {
  const today = new Date()
  const dayName = today.toLocaleDateString("en-US", { weekday: "long" })
  const monthName = today.toLocaleDateString("en-US", { month: "long" })
  const date = today.getDate()
  const year = today.getFullYear()

return (
    <div className="bg-white/90 backdrop-blur-xl rounded-2xl p-4 shadow-lg w-40">
      <div className="text-center">
        <div className="text-xs font-semibold text-gray-500 uppercase tracking-wide">{dayName}</div>
        <div className="text-5xl font-bold text-red-500 my-2">{date}</div>
        <div className="text-sm font-medium text-gray-700">
          {monthName} {year}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* macOS-inspired color palette */
  --background: oklch(0.98 0.005 264);
  --foreground: oklch(0.2 0 0);
  --card: oklch(0.99 0.002 264);
  --card-foreground: oklch(0.2 0 0);
  --popover: oklch(0.99 0.002 264);
  --popover-foreground: oklch(0.2 0 0);
  --primary: oklch(0.55 0.18 252);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.94 0.01 264);
  --secondary-foreground: oklch(0.2 0 0);
  --muted: oklch(0.96 0.005 264);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.55 0.18 252);
  --accent-foreground: oklch(0.99 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.88 0.01 264);
  --input: oklch(0.88 0.01 264);
  --ring: oklch(0.55 0.18 252);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);

/* macOS specific colors */
  --macos-menu-bg: rgba(246, 246, 248, 0.8);
  --macos-window-bg: oklch(0.98 0.005 264);
  --macos-dock-bg: rgba(255, 255, 255, 0.3);
  --macos-blue: oklch(0.55 0.18 252);
  --macos-red: oklch(0.577 0.245 27.325);
  --macos-yellow: oklch(0.828 0.189 84.429);
  --macos-green: oklch(0.6 0.118 184.704);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* macOS specific styles */
.macos-blur {
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
}

.macos-window-shadow {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}

.macos-dock-shadow {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Apple-style animations */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Responsive styles for mobile and tablet devices */
@media (max-width: 768px) {
  .macos-window-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  }

/* Make windows full screen on mobile */
  .window-mobile {
    position: fixed !important;
    top: 28px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 60px !important;
    width: 100% !important;
    height: calc(100vh - 88px) !important;
  }

/* Adjust dock for mobile */
  .dock-mobile {
    padding: 0.5rem;
    gap: 0.5rem;
  }

.dock-icon-mobile {
    width: 3rem;
    height: 3rem;
  }

/* Hide widgets on small screens */
  .widget-container {
    display: none;
  }

@media (min-width: 640px) {
    .widget-container {
      display: flex;
    }
  }
}

/* Smooth scrolling for all containers */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.7);
}
[V0_FILE]typescriptreact:file="components/dock.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import type { AppType, WindowState } from "./macos-desktop"
import {
  FinderIcon,
  SafariIcon,
  MessagesIcon,
  CalendarIcon,
  PhotosIcon,
  MusicIcon,
  NotesIcon,
  VSCodeIcon,
  TerminalIcon,
  DockerIcon,
  GitIcon,
  SettingsIcon,
  LaunchpadIcon,
} from "./app-icons"

interface DockProps {
  onAppClick: (app: AppType, title: string) => void
  minimizedWindows: WindowState[]
  onUnminimize: (id: string) => void
  onLaunchpadClick: () => void
  openApps: AppType[]
}

const dockApps = [
  { id: "finder" as AppType, icon: FinderIcon, label: "Finder" },
  { id: "safari" as AppType, icon: SafariIcon, label: "Safari" },
  { id: "messages" as AppType, icon: MessagesIcon, label: "Messages" },
  { id: "calendar" as AppType, icon: CalendarIcon, label: "Calendar" },
  { id: "photos" as AppType, icon: PhotosIcon, label: "Photos" },
  { id: "music" as AppType, icon: MusicIcon, label: "Music" },
  { id: "notes" as AppType, icon: NotesIcon, label: "Notes" },
  { id: "vscode" as AppType, icon: VSCodeIcon, label: "VS Code" },
  { id: "terminal" as AppType, icon: TerminalIcon, label: "Terminal" },
  { id: "docker" as AppType, icon: DockerIcon, label: "Docker" },
  { id: "git" as AppType, icon: GitIcon, label: "Git Bash" },
  { id: "settings" as AppType, icon: SettingsIcon, label: "Settings" },
]

export function Dock({ onAppClick, minimizedWindows, onUnminimize, onLaunchpadClick, openApps }: DockProps) {
  const [hoveredApp, setHoveredApp] = useState<string | null>(null)
  const [contextMenu, setContextMenu] = useState<{ app: AppType; x: number; y: number } | null>(null)

const handleContextMenu = (e: React.MouseEvent, app: AppType) => {
    e.preventDefault()
    setContextMenu({ app, x: e.clientX, y: e.clientY })
  }

return (
    <>
      <div className="fixed bottom-2 left-1/2 -translate-x-1/2 z-50">
        <div className="bg-white/30 macos-blur macos-dock-shadow rounded-2xl px-2 py-2 flex items-end gap-1 border border-white/20">
          {/* Launchpad icon */}
          <button
            className="relative group transition-transform duration-200 ease-out"
            style={{
              transform: hoveredApp === "launchpad" ? "scale(1.2) translateY(-8px)" : "scale(1)",
            }}
            onClick={onLaunchpadClick}
            onMouseEnter={() => setHoveredApp("launchpad")}
            onMouseLeave={() => setHoveredApp(null)}
          >
            <div className="w-14 h-14 rounded-xl shadow-lg overflow-hidden">
              <LaunchpadIcon />
            </div>
            <div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
              Launchpad
            </div>
          </button>

{dockApps.map((app, index) => {
            const isHovered = hoveredApp === app.id
            const isOpen = openApps.includes(app.id)
            const IconComponent = app.icon

return (
              <button
                key={app.id}
                data-app={app.id}
                className="relative group transition-transform duration-200 ease-out"
                style={{
                  transform: isHovered ? "scale(1.2) translateY(-8px)" : "scale(1)",
                }}
                onMouseEnter={() => setHoveredApp(app.id)}
                onMouseLeave={() => setHoveredApp(null)}
                onClick={() => onAppClick(app.id, app.label)}
                onContextMenu={(e) => handleContextMenu(e, app.id)}
              >
                <div className="w-14 h-14 rounded-xl shadow-lg overflow-hidden">
                  <IconComponent />
                </div>

{/* Tooltip */}
                <div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800/90 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
                  {app.label}
                </div>

{/* Running indicator */}
                {isOpen && (
                  <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-gray-700 rounded-full" />
                )}
              </button>
            )
          })}

{/* Divider */}
          {minimizedWindows.length > 0 && <div className="w-px h-12 bg-white/30 mx-1" />}

{/* Minimized windows */}
          {minimizedWindows.map((window) => (
            <button
              key={window.id}
              className="w-14 h-14 rounded-xl bg-white/50 flex items-center justify-center text-2xl shadow-lg hover:scale-110 transition-transform"
              onClick={() => onUnminimize(window.id)}
            >
              📄
            </button>
          ))}
        </div>
      </div>

{/* Context menu */}
      {contextMenu && (
        <div
          className="fixed bg-[var(--macos-menu-bg)] macos-blur border border-black/10 rounded-lg shadow-lg py-1 z-[60] min-w-[180px]"
          style={{ left: contextMenu.x, top: contextMenu.y - 100 }}
          onClick={() => setContextMenu(null)}
        >
          <button className="w-full px-4 py-1.5 text-left text-sm hover:bg-blue-500 hover:text-white transition-colors">
            Options
          </button>
          <button className="w-full px-4 py-1.5 text-left text-sm hover:bg-blue-500 hover:text-white transition-colors">
            Show in Finder
          </button>
          <div className="h-px bg-black/10 my-1" />
          <button className="w-full px-4 py-1.5 text-left text-sm hover:bg-blue-500 hover:text-white transition-colors">
            Quit
          </button>
        </div>
      )}
    </>
  )
}
[V0_FILE]typescriptreact:file="components/apps/music.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Play, Pause, SkipBack, SkipForward, Volume2, Heart, Shuffle, Repeat } from "lucide-react"

const albums = [
  { id: 1, title: "Midnight Dreams", artist: "The Echoes", cover: "/dreamy-night-sky-album-cover.jpg", duration: "3:45" },
  { id: 2, title: "Summer Vibes", artist: "Coastal Waves", cover: "/summer-beach-sunset-album-cover.jpg", duration: "4:12" },
  { id: 3, title: "Urban Nights", artist: "City Lights", cover: "/city-skyline-night-album-cover.png", duration: "3:28" },
  { id: 4, title: "Acoustic Sessions", artist: "Folk Tales", cover: "/acoustic-guitar-wooden-album-cover.jpg", duration: "5:03" },
  { id: 5, title: "Electronic Dreams", artist: "Synth Wave", cover: "/neon-synthwave-retro-album-cover.jpg", duration: "4:35" },
  { id: 6, title: "Jazz Lounge", artist: "Smooth Trio", cover: "/jazz-saxophone-lounge-album-cover.jpg", duration: "6:18" },
]

export function Music() {
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentAlbum, setCurrentAlbum] = useState(albums[0])
  const [volume, setVolume] = useState(70)
  const [progress, setProgress] = useState(45)

const handlePlayAlbum = (album: (typeof albums)[0]) => {
    setCurrentAlbum(album)
    setIsPlaying(true)
    setProgress(0)
  }

return (
    <div className="flex flex-col h-full bg-gradient-to-b from-pink-50 to-purple-50">
      <div className="flex-1 overflow-auto p-8">
        <h1 className="text-3xl font-bold mb-8 text-gray-800">Recently Played</h1>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
          {albums.map((album) => (
            <div key={album.id} className="group cursor-pointer" onClick={() => handlePlayAlbum(album)}>
              <div className="aspect-square rounded-xl mb-3 relative overflow-hidden shadow-lg transform transition-transform group-hover:scale-105 bg-gray-200">
                <img src={album.cover || "/placeholder.svg"} alt={album.title} className="w-full h-full object-cover" />
                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
                  <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-xl">
                    <Play className="w-8 h-8 text-pink-500 ml-1" />
                  </div>
                </div>
              </div>
              <div className="font-semibold text-gray-800">{album.title}</div>
              <div className="text-sm text-gray-600">{album.artist}</div>
              <div className="text-xs text-gray-500 mt-1">{album.duration}</div>
            </div>
          ))}
        </div>
      </div>

{/* Player */}
      <div className="h-28 border-t border-gray-200 bg-white/80 backdrop-blur-xl flex items-center justify-between px-8 shadow-lg">
        <div className="flex items-center gap-4 flex-1">
          <div className="w-16 h-16 rounded-lg shadow-md overflow-hidden bg-gray-200">
            <img
              src={currentAlbum.cover || "/placeholder.svg"}
              alt={currentAlbum.title}
              className="w-full h-full object-cover"
            />
          </div>
          <div>
            <div className="font-semibold text-gray-800">{currentAlbum.title}</div>
            <div className="text-sm text-gray-600">{currentAlbum.artist}</div>
          </div>
          <button className="p-2 hover:bg-gray-100 rounded-full transition-colors ml-2">
            <Heart className="w-5 h-5 text-gray-600" />
          </button>
        </div>

<div className="flex flex-col items-center gap-2 flex-1">
          <div className="flex items-center gap-4">
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <Shuffle className="w-4 h-4 text-gray-600" />
            </button>
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <SkipBack className="w-5 h-5 text-gray-700" />
            </button>
            <button
              onClick={() => setIsPlaying(!isPlaying)}
              className="p-3 bg-gradient-to-r from-pink-500 to-purple-500 text-white rounded-full hover:from-pink-600 hover:to-purple-600 transition-all shadow-lg"
            >
              {isPlaying ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6 ml-0.5" />}
            </button>
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <SkipForward className="w-5 h-5 text-gray-700" />
            </button>
            <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
              <Repeat className="w-4 h-4 text-gray-600" />
            </button>
          </div>
          <div className="flex items-center gap-2 w-full max-w-md">
            <span className="text-xs text-gray-600">1:23</span>
            <div className="flex-1 h-1 bg-gray-200 rounded-full overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full transition-all"
                style={{ width: `${progress}%` }}
              />
            </div>
            <span className="text-xs text-gray-600">{currentAlbum.duration}</span>
          </div>
        </div>

<div className="flex items-center gap-3 flex-1 justify-end">
          <Volume2 className="w-5 h-5 text-gray-600" />
          <div className="w-24 h-1 bg-gray-200 rounded-full overflow-hidden">
            <div
              className="h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full"
              style={{ width: `${volume}%` }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/dreamy-night-sky-album-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dreamy-night-sky-album-cover-o93N3hFDWZSPz5uJe7PD58nrhojpmp.jpg" isMerged="true"
[V0_FILE]jpg:file="public/summer-beach-sunset-album-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/summer-beach-sunset-album-cover-3HZoaw6B24ovuXzU2HvVY2nXUCS020.jpg" isMerged="true"
[V0_FILE]png:file="public/city-skyline-night-album-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/city-skyline-night-album-cover-rSZU3YSav2uqEPWMXCytt5j6xPbEDu.png" isMerged="true"
[V0_FILE]jpg:file="public/acoustic-guitar-wooden-album-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/acoustic-guitar-wooden-album-cover-SjeLvgbXVgorZJGR1kq09ZBqGxbnpP.jpg" isMerged="true"
[V0_FILE]jpg:file="public/neon-synthwave-retro-album-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/neon-synthwave-retro-album-cover-d3jClX6bkAeKdvOTX7AOuZDp42liTA.jpg" isMerged="true"
[V0_FILE]jpg:file="public/jazz-saxophone-lounge-album-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jazz-saxophone-lounge-album-cover-f2OcT2TDPTyHYEAOjL4SU2EqgnGgFv.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/animated-wallpaper.tsx" isEdit="true" isMerged="true"
"use client"

export function AnimatedWallpaper() {
  return (
    <div className="absolute inset-0 overflow-hidden">
      {/* macOS Big Sur inspired gradient wallpaper */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#FF6B9D] via-[#FFA07A] to-[#FFD700]">
        {/* Layer 1: Pink to Orange wave */}
        <div
          className="absolute inset-0 opacity-90"
          style={{
            background: "linear-gradient(135deg, #FF1B6B 0%, #FF6B9D 25%, #FFA07A 50%, transparent 75%)",
          }}
        />

{/* Layer 2: Orange to Yellow wave */}
        <div
          className="absolute inset-0 opacity-80"
          style={{
            background: "linear-gradient(165deg, transparent 20%, #FF8C42 40%, #FFB347 60%, #FFD700 80%)",
          }}
        />

{/* Layer 3: Blue accent wave */}
        <div
          className="absolute inset-0 opacity-70"
          style={{
            background: "linear-gradient(195deg, transparent 50%, #4A90E2 70%, #5DADE2 85%, #85C1E9 100%)",
          }}
        />

{/* Layer 4: Light blue top accent */}
        <div
          className="absolute inset-0 opacity-60"
          style={{
            background: "linear-gradient(180deg, #87CEEB 0%, #B0E0E6 15%, transparent 40%)",
          }}
        />

{/* Subtle noise texture for depth */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage:
              "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E\")",
          }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/finder.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronRight, Folder, Home, Download, ImageIcon, Music, Video, Grid3x3, List, Search } from "lucide-react"

interface FinderProps {
  initialFolder?: string
}

const sidebarItems = [
  { icon: Home, label: "Home", color: "text-blue-500" },
  { icon: Download, label: "Downloads", color: "text-green-500" },
  { icon: Folder, label: "Documents", color: "text-blue-400" },
  { icon: ImageIcon, label: "Pictures", color: "text-purple-500" },
  { icon: Music, label: "Music", color: "text-pink-500" },
  { icon: Video, label: "Movies", color: "text-orange-500" },
]

const documentsFiles = [
  { name: "Project Proposal.pdf", type: "file", size: "2.4 MB", modified: "Today, 2:30 PM", icon: "📄" },
  { name: "Vacation Photos", type: "folder", items: 156, modified: "Yesterday", icon: "📁" },
  { name: "Budget 2024.xlsx", type: "file", size: "856 KB", modified: "Jan 15, 2024", icon: "📊" },
  { name: "Meeting Notes", type: "folder", items: 23, modified: "Jan 10, 2024", icon: "📁" },
  { name: "Design Mockups", type: "folder", items: 45, modified: "Jan 8, 2024", icon: "📁" },
  { name: "Report.docx", type: "file", size: "1.2 MB", modified: "Jan 5, 2024", icon: "📝" },
  { name: "Presentation.pptx", type: "file", size: "3.8 MB", modified: "Jan 3, 2024", icon: "📊" },
  { name: "Code Projects", type: "folder", items: 12, modified: "Dec 28, 2023", icon: "📁" },
]

const downloadsFiles = [
  { name: "macOS-installer.dmg", type: "file", size: "12.4 GB", modified: "Today, 3:45 PM", icon: "💿" },
  { name: "VS-Code-Setup.zip", type: "file", size: "156 MB", modified: "Today, 2:15 PM", icon: "📦" },
  { name: "wallpaper-collection.zip", type: "file", size: "45 MB", modified: "Yesterday", icon: "📦" },
  { name: "node-modules.tar.gz", type: "file", size: "234 MB", modified: "Jan 14, 2024", icon: "📦" },
  { name: "Screenshot 2024-01-15.png", type: "file", size: "2.1 MB", modified: "Jan 15, 2024", icon: "🖼️" },
  { name: "invoice-2024.pdf", type: "file", size: "456 KB", modified: "Jan 12, 2024", icon: "📄" },
  { name: "music-album.zip", type: "file", size: "89 MB", modified: "Jan 10, 2024", icon: "📦" },
]

export function Finder({ initialFolder = "Documents" }: FinderProps) {
  const [selectedItem, setSelectedItem] = useState<string | null>(null)
  const [viewMode, setViewMode] = useState<"list" | "grid">("list")
  const [searchQuery, setSearchQuery] = useState("")
  const [currentFolder, setCurrentFolder] = useState(initialFolder)

useEffect(() => {
    setCurrentFolder(initialFolder)
  }, [initialFolder])

const getCurrentFiles = () => {
    switch (currentFolder) {
      case "Downloads":
        return downloadsFiles
      case "Documents":
      default:
        return documentsFiles
    }
  }

const files = getCurrentFiles()
  const filteredFiles = files.filter((file) => file.name.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <div className="flex h-full">
      {/* Sidebar */}
      <div className="w-48 bg-gray-50 border-r border-gray-200 p-3">
        <div className="space-y-1">
          <div className="text-xs font-semibold text-gray-500 mb-2 px-2">Favorites</div>
          {sidebarItems.map((item) => (
            <button
              key={item.label}
              onClick={() => setCurrentFolder(item.label)}
              className={`w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-200 transition-colors text-sm ${
                currentFolder === item.label ? "bg-gray-200" : ""
              }`}
            >
              <item.icon className={`w-4 h-4 ${item.color}`} />
              <span>{item.label}</span>
            </button>
          ))}
        </div>

<div className="mt-6 space-y-1">
          <div className="text-xs font-semibold text-gray-500 mb-2 px-2">iCloud</div>
          <button className="w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-200 transition-colors text-sm">
            <Folder className="w-4 h-4 text-blue-500" />
            <span>iCloud Drive</span>
          </button>
        </div>
      </div>

{/* Main content */}
      <div className="flex-1 flex flex-col">
        {/* Toolbar */}
        <div className="h-12 border-b border-gray-200 flex items-center justify-between px-4">
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <Home className="w-4 h-4" />
            <ChevronRight className="w-3 h-3" />
            <span className="font-medium">{currentFolder}</span>
          </div>

<div className="flex items-center gap-3">
            {/* Search */}
            <div className="flex items-center gap-2 bg-gray-100 rounded-md px-3 py-1">
              <Search className="w-4 h-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search"
                className="bg-transparent outline-none text-sm w-32"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>

{/* View toggles */}
            <div className="flex items-center gap-1 bg-gray-100 rounded-md p-1">
              <button
                className={`p-1 rounded ${viewMode === "grid" ? "bg-white shadow-sm" : ""}`}
                onClick={() => setViewMode("grid")}
              >
                <Grid3x3 className="w-4 h-4" />
              </button>
              <button
                className={`p-1 rounded ${viewMode === "list" ? "bg-white shadow-sm" : ""}`}
                onClick={() => setViewMode("list")}
              >
                <List className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>

{/* File list/grid */}
        <div className="flex-1 overflow-auto p-4">
          {viewMode === "list" ? (
            <div className="grid grid-cols-1 gap-1">
              {filteredFiles.map((file) => (
                <button
                  key={file.name}
                  className={`flex items-center gap-3 px-3 py-2 rounded hover:bg-blue-50 transition-colors ${
                    selectedItem === file.name ? "bg-blue-100" : ""
                  }`}
                  onClick={() => setSelectedItem(file.name)}
                >
                  <span className="text-2xl">{file.icon}</span>
                  <div className="flex-1 text-left">
                    <div className="text-sm font-medium">{file.name}</div>
                    <div className="text-xs text-gray-500">
                      {file.type === "folder" ? `${file.items} items` : file.size} • {file.modified}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-4 gap-4">
              {filteredFiles.map((file) => (
                <button
                  key={file.name}
                  className={`flex flex-col items-center gap-2 p-3 rounded hover:bg-blue-50 transition-colors ${
                    selectedItem === file.name ? "bg-blue-100" : ""
                  }`}
                  onClick={() => setSelectedItem(file.name)}
                >
                  <span className="text-5xl">{file.icon}</span>
                  <div className="text-sm font-medium text-center line-clamp-2">{file.name}</div>
                </button>
              ))}
            </div>
          )}
        </div>

{/* Status bar */}
        <div className="h-6 border-t border-gray-200 flex items-center justify-between px-4 text-xs text-gray-600 bg-gray-50">
          <span>{filteredFiles.length} items</span>
          <span>{selectedItem ? "1 item selected" : ""}</span>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/control-center.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Wifi, Bluetooth, Volume2, Sun, Moon } from "lucide-react"

interface ControlCenterProps {
  onClose: () => void
}

export function ControlCenter({ onClose }: ControlCenterProps) {
  const [wifiEnabled, setWifiEnabled] = useState(true)
  const [bluetoothEnabled, setBluetoothEnabled] = useState(true)
  const [volume, setVolume] = useState(70)
  const [brightness, setBrightness] = useState(80)
  const [darkMode, setDarkMode] = useState(false)

return (
    <div className="fixed inset-0 z-[60]" onClick={onClose}>
      <div
        className="absolute top-8 right-4 w-80 bg-[var(--macos-menu-bg)] macos-blur border border-black/10 rounded-2xl shadow-2xl p-4 space-y-3 animate-scale-in"
        onClick={(e) => e.stopPropagation()}
      >
        {/* WiFi */}
        <div
          className={`p-4 rounded-xl cursor-pointer transition-all ${
            wifiEnabled ? "bg-blue-500 text-white" : "bg-white/50 text-gray-700"
          }`}
          onClick={() => setWifiEnabled(!wifiEnabled)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Wifi className="w-6 h-6" />
              <div>
                <div className="font-semibold">Wi-Fi</div>
                <div className="text-sm opacity-80">{wifiEnabled ? "Home Network" : "Off"}</div>
              </div>
            </div>
          </div>
        </div>

{/* Bluetooth */}
        <div
          className={`p-4 rounded-xl cursor-pointer transition-all ${
            bluetoothEnabled ? "bg-blue-500 text-white" : "bg-white/50 text-gray-700"
          }`}
          onClick={() => setBluetoothEnabled(!bluetoothEnabled)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Bluetooth className="w-6 h-6" />
              <div>
                <div className="font-semibold">Bluetooth</div>
                <div className="text-sm opacity-80">{bluetoothEnabled ? "On" : "Off"}</div>
              </div>
            </div>
          </div>
        </div>

{/* Volume */}
        <div className="p-4 rounded-xl bg-white/50">
          <div className="flex items-center gap-3 mb-2">
            <Volume2 className="w-5 h-5 text-gray-700" />
            <span className="font-semibold text-gray-700">Volume</span>
          </div>
          <input
            type="range"
            min="0"
            max="100"
            value={volume}
            onChange={(e) => setVolume(Number(e.target.value))}
            className="w-full accent-blue-500"
          />
        </div>

{/* Brightness */}
        <div className="p-4 rounded-xl bg-white/50">
          <div className="flex items-center gap-3 mb-2">
            <Sun className="w-5 h-5 text-gray-700" />
            <span className="font-semibold text-gray-700">Brightness</span>
          </div>
          <input
            type="range"
            min="0"
            max="100"
            value={brightness}
            onChange={(e) => setBrightness(Number(e.target.value))}
            className="w-full accent-blue-500"
          />
        </div>

{/* Dark Mode */}
        <div
          className={`p-4 rounded-xl cursor-pointer transition-all ${
            darkMode ? "bg-gray-800 text-white" : "bg-white/50 text-gray-700"
          }`}
          onClick={() => setDarkMode(!darkMode)}
        >
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Moon className="w-6 h-6" />
              <div>
                <div className="font-semibold">Dark Mode</div>
                <div className="text-sm opacity-80">{darkMode ? "On" : "Off"}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/macos-desktop.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { MenuBar } from "./menu-bar"
import { Dock } from "./dock"
import { Window } from "./window"
import { DesktopIcon } from "./desktop-icon"
import { Spotlight } from "./spotlight"
import { ContextMenu } from "./context-menu"
import { NotificationCenter } from "./notification-center"
import { Launchpad } from "./launchpad"
import { AboutThisMac } from "./about-this-mac"
import { ControlCenter } from "./control-center"
import { Finder } from "./apps/finder"
import { Safari } from "./apps/safari"
import { Messages } from "./apps/messages"
import { Settings } from "./apps/settings"
import { Calendar } from "./apps/calendar"
import { Photos } from "./apps/photos"
import { Music } from "./apps/music"
import { Notes } from "./apps/notes"
import { VSCode } from "./apps/vscode"
import { Terminal } from "./apps/terminal"
import { Docker } from "./apps/docker"
import { GitBash } from "./apps/git-bash"
import { DownloadsIcon } from "./app-icons"
import { ClockWidget } from "./widgets/clock-widget"
import { CalendarWidget } from "./widgets/calendar-widget"
import { AnimatedWallpaper } from "./animated-wallpaper"

export interface WindowState {
  id: string
  app: AppType
  title: string
  isMinimized: boolean
  isMaximized: boolean
  position: { x: number; y: number }
  size: { width: number; height: number }
  zIndex: number
}

interface ContextMenuState {
  x: number
  y: number
  items: Array<{ label: string; action: () => void; divider?: boolean }>
}

export function MacOSDesktop() {
  const [windows, setWindows] = useState<WindowState[]>([])
  const [highestZIndex, setHighestZIndex] = useState(10)
  const [currentTime, setCurrentTime] = useState(new Date())
  const [spotlightOpen, setSpotlightOpen] = useState(false)
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
  const [notificationCenterOpen, setNotificationCenterOpen] = useState(false)
  const [launchpadOpen, setLaunchpadOpen] = useState(false)
  const [activeApp, setActiveApp] = useState<string>("Finder")
  const [aboutThisMacOpen, setAboutThisMacOpen] = useState(false)
  const [controlCenterOpen, setControlCenterOpen] = useState(false)

useEffect(() => {
    const timer = setInterval(() => setCurrentTime(new Date()), 1000)
    return () => clearInterval(timer)
  }, [])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === " ") {
        e.preventDefault()
        setSpotlightOpen(true)
      }
      if (e.key === "Escape") {
        setSpotlightOpen(false)
        setLaunchpadOpen(false)
        setContextMenu(null)
      }
      if (e.key === "F4" || (e.ctrlKey && e.key === "ArrowUp")) {
        e.preventDefault()
        setLaunchpadOpen(!launchpadOpen)
      }
    }

const handleClick = () => {
      setContextMenu(null)
    }

window.addEventListener("keydown", handleKeyDown)
    window.addEventListener("click", handleClick)
    return () => {
      window.removeEventListener("keydown", handleKeyDown)
      window.removeEventListener("click", handleClick)
    }
  }, [launchpadOpen])

const openApp = (app: AppType, title: string) => {
    setLaunchpadOpen(false)
    setActiveApp(title)
    const existingWindow = windows.find((w) => w.app === app && !w.isMinimized)

if (existingWindow) {
      focusWindow(existingWindow.id)
      const dockIcon = document.querySelector(`[data-app="${app}"]`)
      if (dockIcon) {
        dockIcon.classList.add("animate-bounce")
        setTimeout(() => dockIcon.classList.remove("animate-bounce"), 500)
      }
      return
    }

const minimizedWindow = windows.find((w) => w.app === app && w.isMinimized)
    if (minimizedWindow) {
      unminimizeWindow(minimizedWindow.id)
      return
    }

const newWindow: WindowState = {
      id: `${app}-${Date.now()}`,
      app,
      title,
      isMinimized: false,
      isMaximized: false,
      position: { x: 100 + windows.length * 30, y: 80 + windows.length * 30 },
      size: { width: 900, height: 600 },
      zIndex: highestZIndex + 1,
    }

setWindows([...windows, newWindow])
    setHighestZIndex(highestZIndex + 1)
  }

const closeWindow = (id: string) => {
    setWindows(windows.filter((w) => w.id !== id))
  }

const minimizeWindow = (id: string) => {
    setWindows(windows.map((w) => (w.id === id ? { ...w, isMinimized: true } : w)))
  }

const unminimizeWindow = (id: string) => {
    setWindows(windows.map((w) => (w.id === id ? { ...w, isMinimized: false, zIndex: highestZIndex + 1 } : w)))
    setHighestZIndex(highestZIndex + 1)
  }

const maximizeWindow = (id: string) => {
    setWindows(
      windows.map((w) =>
        w.id === id
          ? {
              ...w,
              isMaximized: !w.isMaximized,
              position: w.isMaximized ? w.position : { x: 0, y: 28 },
              size: w.isMaximized ? w.size : { width: window.innerWidth, height: window.innerHeight - 28 - 80 },
            }
          : w,
      ),
    )
  }

const focusWindow = (id: string) => {
    const newZIndex = highestZIndex + 1
    setWindows(windows.map((w) => (w.id === id ? { ...w, zIndex: newZIndex } : w)))
    setHighestZIndex(newZIndex)
    const window = windows.find((w) => w.id === id)
    if (window) {
      setActiveApp(window.title)
    }
  }

const updateWindowPosition = (id: string, position: { x: number; y: number }) => {
    setWindows(windows.map((w) => (w.id === id ? { ...w, position } : w)))
  }

const updateWindowSize = (id: string, size: { width: number; height: number }) => {
    setWindows(windows.map((w) => (w.id === id ? { ...w, size } : w)))
  }

const handleDesktopContextMenu = (e: React.MouseEvent) => {
    e.preventDefault()
    setContextMenu({
      x: e.clientX,
      y: e.clientY,
      items: [
        { label: "New Folder", action: () => console.log("New folder") },
        { label: "Get Info", action: () => console.log("Get info") },
        { divider: true, label: "", action: () => {} },
        { label: "Change Desktop Background...", action: () => openApp("settings", "Settings") },
        { divider: true, label: "", action: () => {} },
        { label: "Show View Options", action: () => console.log("View options") },
      ],
    })
  }

const renderAppContent = (app: AppType, title: string) => {
    switch (app) {
      case "finder":
        return <Finder initialFolder={title} />
      case "safari":
        return <Safari />
      case "messages":
        return <Messages />
      case "settings":
        return <Settings />
      case "calendar":
        return <Calendar />
      case "photos":
        return <Photos />
      case "music":
        return <Music />
      case "notes":
        return <Notes />
      case "vscode":
        return <VSCode />
      case "terminal":
        return <Terminal />
      case "docker":
        return <Docker />
      case "git":
        return <GitBash />
      default:
        return <div className="p-8">App content</div>
    }
  }

return (
    <div className="h-screen w-screen overflow-hidden relative bg-gradient-to-br from-blue-400 via-purple-300 to-pink-300">
      <div className="absolute inset-0 bg-gradient-to-br from-[#0a1628] via-[#1e3a5f] to-[#2d5a7b]" />
      <AnimatedWallpaper />

<div className="absolute inset-0" onContextMenu={handleDesktopContextMenu}>
        <div className="absolute top-20 md:top-32 right-4 md:right-8 flex flex-col gap-4 md:gap-6">
          <DesktopIcon icon={DownloadsIcon} label="Downloads" onDoubleClick={() => openApp("finder", "Downloads")} />
        </div>

<MenuBar
        currentTime={currentTime}
        activeApp={activeApp}
        onSpotlightClick={() => setSpotlightOpen(true)}
        onNotificationClick={() => setNotificationCenterOpen(!notificationCenterOpen)}
        onAboutThisMac={() => setAboutThisMacOpen(true)}
        onControlCenterClick={() => setControlCenterOpen(!controlCenterOpen)}
      />

{windows.map(
        (window) =>
          !window.isMinimized && (
            <Window
              key={window.id}
              id={window.id}
              title={window.title}
              position={window.position}
              size={window.size}
              zIndex={window.zIndex}
              isMaximized={window.isMaximized}
              onClose={() => closeWindow(window.id)}
              onMinimize={() => minimizeWindow(window.id)}
              onMaximize={() => maximizeWindow(window.id)}
              onFocus={() => focusWindow(window.id)}
              onPositionChange={(pos) => updateWindowPosition(window.id, pos)}
              onSizeChange={(size) => updateWindowSize(window.id, size)}
            >
              {renderAppContent(window.app, window.title)}
            </Window>
          ),
      )}

<Dock
        onAppClick={openApp}
        minimizedWindows={windows.filter((w) => w.isMinimized)}
        onUnminimize={unminimizeWindow}
        onLaunchpadClick={() => setLaunchpadOpen(!launchpadOpen)}
        openApps={windows.map((w) => w.app)}
      />

{spotlightOpen && <Spotlight onClose={() => setSpotlightOpen(false)} onOpenApp={openApp} />}

{contextMenu && <ContextMenu x={contextMenu.x} y={contextMenu.y} items={contextMenu.items} />}

{notificationCenterOpen && <NotificationCenter onClose={() => setNotificationCenterOpen(false)} />}

{launchpadOpen && <Launchpad onClose={() => setLaunchpadOpen(false)} onOpenApp={openApp} />}

{aboutThisMacOpen && <AboutThisMac onClose={() => setAboutThisMacOpen(false)} />}

{controlCenterOpen && <ControlCenter onClose={() => setControlCenterOpen(false)} />}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/launchpad.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type { AppType } from "./macos-desktop"
import {
  FinderIcon,
  SafariIcon,
  MessagesIcon,
  CalendarIcon,
  PhotosIcon,
  MusicIcon,
  NotesIcon,
  VSCodeIcon,
  TerminalIcon,
  DockerIcon,
  GitIcon,
  SettingsIcon,
} from "./app-icons"

interface LaunchpadProps {
  onClose: () => void
  onOpenApp: (app: AppType, title: string) => void
}

const apps = [
  { id: "finder" as AppType, icon: FinderIcon, label: "Finder" },
  { id: "safari" as AppType, icon: SafariIcon, label: "Safari" },
  { id: "messages" as AppType, icon: MessagesIcon, label: "Messages" },
  { id: "calendar" as AppType, icon: CalendarIcon, label: "Calendar" },
  { id: "photos" as AppType, icon: PhotosIcon, label: "Photos" },
  { id: "music" as AppType, icon: MusicIcon, label: "Music" },
  { id: "notes" as AppType, icon: NotesIcon, label: "Notes" },
  { id: "vscode" as AppType, icon: VSCodeIcon, label: "VS Code" },
  { id: "terminal" as AppType, icon: TerminalIcon, label: "Terminal" },
  { id: "docker" as AppType, icon: DockerIcon, label: "Docker" },
  { id: "git" as AppType, icon: GitIcon, label: "Git Bash" },
  { id: "settings" as AppType, icon: SettingsIcon, label: "Settings" },
]

export function Launchpad({ onClose, onOpenApp }: LaunchpadProps) {
  return (
    <div
      className="fixed inset-0 bg-black/60 backdrop-blur-xl z-[90] flex items-center justify-center p-8 md:p-20"
      onClick={onClose}
    >
      <div
        className="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-7 gap-6 md:gap-8 max-w-6xl"
        onClick={(e) => e.stopPropagation()}
      >
        {apps.map((app, index) => {
          const IconComponent = app.icon
          return (
            <button
              key={index}
              className="flex flex-col items-center gap-2 group"
              onClick={() => {
                if ("id" in app) {
                  onOpenApp(app.id, app.label)
                }
              }}
            >
              <div className="w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl shadow-2xl group-hover:scale-110 transition-transform overflow-hidden">
                <IconComponent />
              </div>
              <span className="text-white text-xs sm:text-sm font-medium max-w-full truncate px-1">{app.label}</span>
            </button>
          )
        })}
      </div>

{/* Page indicators */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2">
        <div className="w-2 h-2 rounded-full bg-white" />
        <div className="w-2 h-2 rounded-full bg-white/40" />
        <div className="w-2 h-2 rounded-full bg-white/40" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/about-this-mac.tsx" isEdit="true" isMerged="true"
"use client"

interface AboutThisMacProps {
  onClose: () => void
}

export function AboutThisMac({ onClose }: AboutThisMacProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] animate-fade-in p-4">
      <div className="bg-[#f5f5f7] rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-scale-in">
        {/* Header */}
        <div className="relative bg-white p-6 sm:p-8 flex flex-col items-center border-b border-gray-200">
          <button
            onClick={onClose}
            className="absolute top-4 left-4 w-3 h-3 rounded-full bg-[#FF5F57] hover:bg-[#FF5F57]/80 transition-all flex items-center justify-center"
            aria-label="Close"
          >
            <span className="text-[8px] text-red-900">✕</span>
          </button>

<h1 className="text-xl sm:text-2xl font-semibold text-gray-800 mb-1">MacBook Pro</h1>
          <p className="text-xs sm:text-sm text-gray-500">16-inch, 2021</p>
        </div>

{/* System Info */}
        <div className="px-6 sm:px-8 py-4 sm:py-6 space-y-2 sm:space-y-3 text-sm">
          <div className="flex justify-between py-2 border-b border-gray-100">
            <span className="text-gray-600">Chip</span>
            <span className="font-medium text-gray-800">Apple M1 Pro</span>
          </div>
          <div className="flex justify-between py-2 border-b border-gray-100">
            <span className="text-gray-600">Memory</span>
            <span className="font-medium text-gray-800">16 GB</span>
          </div>
          <div className="flex justify-between py-2 border-b border-gray-100">
            <span className="text-gray-600">Startup disk</span>
            <span className="font-medium text-gray-800">Macintosh HD</span>
          </div>
          <div className="flex justify-between py-2 border-b border-gray-100">
            <span className="text-gray-600">Serial number</span>
            <span className="font-medium text-gray-800 text-xs sm:text-sm">X02YZ1ZYZX</span>
          </div>
          <div className="flex justify-between py-2">
            <span className="text-gray-600">macOS</span>
            <span className="font-medium text-gray-800">Sequoia 15.0</span>
          </div>
        </div>

{/* More Info Button */}
        <div className="px-6 sm:px-8 pb-4 sm:pb-6">
          <button className="w-full px-4 py-2.5 bg-white hover:bg-gray-50 text-gray-700 rounded-lg transition-colors font-medium border border-gray-300 text-sm">
            More Info...
          </button>
        </div>

{/* Footer */}
        <div className="px-6 sm:px-8 pb-4 sm:pb-6 text-center">
          <p className="text-xs text-gray-500">Regulatory Certification</p>
          <p className="text-xs text-gray-500 mt-1">™ and © 1983-2024 Apple Inc.</p>
          <p className="text-xs text-gray-500">All Rights Reserved.</p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/app-icons.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
export const FinderIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images-GffQFvnmGS4oNDht4LFcZ2BqkEsK2D.jpg"
      alt="Finder"
      className="w-full h-full object-cover"
    />
  </div>
)

export const SafariIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images-V4Q21hXOK9GNFULWIvh5QmeJfVBfSO.jpg"
      alt="Safari"
      className="w-full h-full object-cover"
    />
  </div>
)

export const MessagesIcon = () => (
  <div className="w-full h-full rounded-[22%] bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
    <svg viewBox="0 0 64 64" className="w-3/4 h-3/4" fill="white">
      <path d="M32 8C18.745 8 8 17.523 8 29.333c0 6.4 3.2 12.134 8.267 16.134v8.8l8.533-4.667c2.4.8 4.933 1.2 7.2 1.2 13.255 0 24-9.523 24-21.333S45.255 8 32 8z" />
    </svg>
  </div>
)

export const CalendarIcon = () => {
  const today = new Date().getDate()
  return (
    <div className="w-full h-full rounded-[22%] bg-white flex flex-col overflow-hidden shadow-lg">
      <div className="h-1/4 bg-gradient-to-b from-red-500 to-red-600" />
      <div className="flex-1 flex items-center justify-center">
        <span className="text-3xl md:text-4xl font-bold text-gray-800">{today}</span>
      </div>
    </div>
  )
}

export const PhotosIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/493155-vxGeIhTw0EvXAZbKcAyW67QfvNVrfq.webp"
      alt="Photos"
      className="w-full h-full object-cover"
    />
  </div>
)

export const MusicIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images-vvoaxB7U9YJzKLYcq9aiQZVl3SnXd1.jpg"
      alt="Music"
      className="w-full h-full object-cover"
    />
  </div>
)

export const NotesIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/notes_macos_bigsur_icon_189901-y0UlhiIg1eRRO2QrupDcgrpio0AqcE.png"
      alt="Notes"
      className="w-full h-full object-cover"
    />
  </div>
)

export const VSCodeIcon = () => (
  <div className="w-full h-full rounded-[22%] bg-[#1e1e1e] flex items-center justify-center overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-3v8w7AQLA19COX4w3UYNrr8IjY3s2S.png"
      alt="VS Code"
      className="w-full h-full object-cover"
    />
  </div>
)

export const TerminalIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/terminal-2021-06-03-cP8LONJhjquJOgYKNSOIWIy2pZuqxT.webp"
      alt="Terminal"
      className="w-full h-full object-cover"
    />
  </div>
)

export const DockerIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/docker_macos_bigsur_icon_190231-7zOXNNfnYBISTonAUXcB5M7GL8xaXD.png"
      alt="Docker"
      className="w-full h-full object-cover"
    />
  </div>
)

export const GitIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/images-paMp389RC6z0xNSQzqWkrJf2znOiY5.png"
      alt="Git"
      className="w-full h-full object-cover"
    />
  </div>
)

export const SettingsIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2b78f13e-cbc8-4e7f-95ad-c00d7c135305-cover-gvYiSJ6pKiss5jkFyGibVGT51FcY3N.png"
      alt="Settings"
      className="w-full h-full object-cover"
    />
  </div>
)

export const LaunchpadIcon = () => (
  <div className="w-full h-full rounded-[22%] bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center p-2 shadow-lg">
    <div className="grid grid-cols-3 gap-1 w-full h-full">
      {[...Array(9)].map((_, i) => (
        <div key={i} className="bg-white rounded-sm" />
      ))}
    </div>
  </div>
)

export const FolderIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img src="https://blob.v0.app/your-folder-image-url.jpg" alt="Folder" className="w-full h-full object-cover" />
  </div>
)

export const DocumentsIcon = () => (
  <div className="w-full h-full rounded-[22%] overflow-hidden">
    <img
      src="https://blob.v0.app/your-documents-image-url.jpg"
      alt="Documents"
      className="w-full h-full object-cover"
    />
  </div>
)

export const DownloadsIcon = () => (
  <div className="w-full h-full rounded-[22%] bg-gradient-to-b from-blue-400 to-blue-600 flex items-center justify-center shadow-lg overflow-hidden">
    <svg viewBox="0 0 64 64" className="w-3/4 h-3/4" fill="white">
      <path d="M8 16c0-2.21 1.79-4 4-4h16l4 4h20c2.21 0 4 1.79 4 4v28c0 2.21-1.79 4-4 4H12c-2.21 0-4-1.79-4-4V16z" />
    </svg>
  </div>
)
[V0_FILE]typescriptreact:file="components/menu-bar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Search, BellIcon, LayoutGrid } from "lucide-react"

interface MenuBarProps {
  currentTime: Date
  activeApp: string
  onSpotlightClick: () => void
  onNotificationClick: () => void
  onAboutThisMac?: () => void
  onControlCenterClick?: () => void
}

interface MenuDropdownProps {
  items: Array<{ label: string; shortcut?: string; divider?: boolean; action?: () => void }>
  onClose: () => void
}

function MenuDropdown({ items, onClose }: MenuDropdownProps) {
  return (
    <div className="absolute top-full left-0 mt-1 min-w-[200px] bg-[var(--macos-menu-bg)] macos-blur border border-black/10 rounded-lg shadow-lg py-1 z-50">
      {items.map((item, index) =>
        item.divider ? (
          <div key={index} className="h-px bg-black/10 my-1" />
        ) : (
          <button
            key={index}
            className="w-full px-4 py-1.5 text-left text-sm hover:bg-blue-500 hover:text-white transition-colors flex items-center justify-between"
            onClick={() => {
              item.action?.()
              onClose()
            }}
          >
            <span>{item.label}</span>
            {item.shortcut && <span className="text-xs opacity-60">{item.shortcut}</span>}
          </button>
        ),
      )}
    </div>
  )
}

export function MenuBar({
  currentTime,
  activeApp,
  onSpotlightClick,
  onNotificationClick,
  onAboutThisMac,
  onControlCenterClick,
}: MenuBarProps) {
  const [activeMenu, setActiveMenu] = useState<string | null>(null)

const formatTime = (date: Date) => {
    return date.toLocaleTimeString("en-US", {
      weekday: "short",
      month: "short",
      day: "numeric",
      hour: "numeric",
      minute: "2-digit",
    })
  }

const appleMenuItems = [
    { label: "About This Mac", action: onAboutThisMac },
    { divider: true },
    { label: "System Settings...", shortcut: "⌘,", action: () => console.log("Opening System Settings") },
    { label: "App Store...", action: () => console.log("Opening App Store") },
    { divider: true },
    { label: "Recent Items", action: () => console.log("Recent Items") },
    { divider: true },
    { label: "Sleep", action: () => console.log("Sleep") },
    { label: "Restart...", action: () => console.log("Restart") },
    { label: "Shut Down...", action: () => console.log("Shut Down") },
  ]

const fileMenuItems = [
    { label: "New Finder Window", shortcut: "⌘N", action: () => console.log("New Finder Window") },
    { label: "New Folder", shortcut: "⇧⌘N", action: () => console.log("New Folder") },
    { label: "New Smart Folder", shortcut: "⌥⌘N", action: () => console.log("New Smart Folder") },
    { divider: true },
    { label: "Open", shortcut: "⌘O", action: () => console.log("Open") },
    { label: "Close Window", shortcut: "⌘W", action: () => console.log("Close Window") },
  ]

const editMenuItems = [
    { label: "Undo", shortcut: "⌘Z", action: () => console.log("Undo") },
    { label: "Redo", shortcut: "⇧⌘Z", action: () => console.log("Redo") },
    { divider: true },
    { label: "Cut", shortcut: "⌘X", action: () => console.log("Cut") },
    { label: "Copy", shortcut: "⌘C", action: () => console.log("Copy") },
    { label: "Paste", shortcut: "⌘V", action: () => console.log("Paste") },
    { label: "Select All", shortcut: "⌘A", action: () => console.log("Select All") },
  ]

const viewMenuItems = [
    { label: "as Icons", shortcut: "⌘1", action: () => console.log("View as Icons") },
    { label: "as List", shortcut: "⌘2", action: () => console.log("View as List") },
    { label: "as Columns", shortcut: "⌘3", action: () => console.log("View as Columns") },
    { label: "as Gallery", shortcut: "⌘4", action: () => console.log("View as Gallery") },
    { divider: true },
    { label: "Show Toolbar", action: () => console.log("Show Toolbar") },
    { label: "Show Sidebar", shortcut: "⌥⌘S", action: () => console.log("Show Sidebar") },
    { label: "Show Status Bar", action: () => console.log("Show Status Bar") },
  ]

const goMenuItems = [
    { label: "Back", shortcut: "⌘[", action: () => console.log("Go Back") },
    { label: "Forward", shortcut: "⌘]", action: () => console.log("Go Forward") },
    { label: "Enclosing Folder", shortcut: "⌘↑", action: () => console.log("Enclosing Folder") },
    { divider: true },
    { label: "Documents", shortcut: "⇧⌘O", action: () => console.log("Go to Documents") },
    { label: "Desktop", shortcut: "⇧⌘D", action: () => console.log("Go to Desktop") },
    { label: "Downloads", shortcut: "⌥⌘L", action: () => console.log("Go to Downloads") },
    { label: "Home", shortcut: "⇧⌘H", action: () => console.log("Go to Home") },
    { label: "Applications", shortcut: "⇧⌘A", action: () => console.log("Go to Applications") },
  ]

const helpMenuItems = [
    { label: "Search", action: () => console.log("Help Search") },
    { divider: true },
    { label: `${activeApp} Help`, action: () => console.log(`${activeApp} Help`) },
    { label: "Tips for Mac", action: () => console.log("Tips for Mac") },
    { label: "macOS Support", action: () => console.log("macOS Support") },
  ]

const menus = [
    {
      id: "apple",
      label: (
        <svg viewBox="0 0 24 24" className="w-4 h-4" fill="currentColor">
          <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
        </svg>
      ),
      items: appleMenuItems,
    },
    { id: "app", label: activeApp, items: fileMenuItems },
    { id: "file", label: "File", items: fileMenuItems },
    { id: "edit", label: "Edit", items: editMenuItems },
    { id: "view", label: "View", items: viewMenuItems },
    { id: "go", label: "Go", items: goMenuItems },
    { id: "window", label: "Window", items: [] },
    { id: "help", label: "Help", items: helpMenuItems },
  ]

return (
    <div className="h-7 bg-[var(--macos-menu-bg)] macos-blur border-b border-black/10 flex items-center justify-between px-4 relative z-50 text-sm select-none">
      <div className="flex items-center gap-1">
        {menus.map((menu) => (
          <div key={menu.id} className="relative">
            <button
              className={`px-2 py-0.5 rounded transition-colors font-medium ${
                activeMenu === menu.id ? "bg-blue-500 text-white" : "hover:bg-white/30"
              }`}
              onClick={() => setActiveMenu(activeMenu === menu.id ? null : menu.id)}
            >
              {menu.label}
            </button>
            {activeMenu === menu.id && menu.items.length > 0 && (
              <MenuDropdown items={menu.items} onClose={() => setActiveMenu(null)} />
            )}
          </div>
        ))}
      </div>

<div className="flex items-center gap-3">
        <button className="hover:bg-white/30 p-1 rounded transition-colors" onClick={onSpotlightClick}>
          <Search className="w-4 h-4" />
        </button>
        <button className="hover:bg-white/30 p-1 rounded transition-colors" onClick={onControlCenterClick}>
          <LayoutGrid className="w-4 h-4" />
        </button>
        <button className="hover:bg-white/30 p-1 rounded transition-colors" onClick={onNotificationClick}>
          <BellIcon className="w-4 h-4" />
        </button>
        <span className="font-medium">{formatTime(currentTime)}</span>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/apps/vscode.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import {
  File,
  Folder,
  Search,
  GitBranch,
  Settings,
  Play,
  ChevronRight,
  ChevronDown,
  X,
  TerminalIcon,
  AlertCircle,
  CheckCircle,
} from "lucide-react"

export function VSCode() {
  const [selectedFile, setSelectedFile] = useState("app.tsx")
  const [expandedFolders, setExpandedFolders] = useState<string[]>(["src", "components"])
  const [openTabs, setOpenTabs] = useState(["app.tsx", "index.tsx", "styles.css"])
  const [showTerminal, setShowTerminal] = useState(true)
  const [terminalOutput, setTerminalOutput] = useState([
    "$ npm run dev",
    "",
    "> next-app@0.1.0 dev",
    "> next dev",
    "",
    "  ▲ Next.js 14.0.4",
    "  - Local:        http://localhost:3000",
    "  - Network:      http://192.168.1.100:3000",
    "",
    "✓ Ready in 2.3s",
  ])

const toggleFolder = (folder: string) => {
    setExpandedFolders((prev) => (prev.includes(folder) ? prev.filter((f) => f !== folder) : [...prev, folder]))
  }

const openFile = (fileName: string) => {
    if (!openTabs.includes(fileName)) {
      setOpenTabs([...openTabs, fileName])
    }
    setSelectedFile(fileName)
  }

const closeTab = (fileName: string, e: React.MouseEvent) => {
    e.stopPropagation()
    const newTabs = openTabs.filter((tab) => tab !== fileName)
    setOpenTabs(newTabs)
    if (selectedFile === fileName && newTabs.length > 0) {
      setSelectedFile(newTabs[newTabs.length - 1])
    }
  }

const fileTree = [
    {
      name: "src",
      type: "folder",
      children: [
        { name: "app.tsx", type: "file" },
        { name: "index.tsx", type: "file" },
        { name: "utils.ts", type: "file" },
        { name: "types.ts", type: "file" },
      ],
    },
    {
      name: "components",
      type: "folder",
      children: [
        { name: "Header.tsx", type: "file" },
        { name: "Footer.tsx", type: "file" },
        { name: "Button.tsx", type: "file" },
        { name: "Card.tsx", type: "file" },
      ],
    },
    {
      name: "styles",
      type: "folder",
      children: [
        { name: "globals.css", type: "file" },
        { name: "styles.css", type: "file" },
      ],
    },
    {
      name: "public",
      type: "folder",
      children: [
        { name: "logo.svg", type: "file" },
        { name: "favicon.ico", type: "file" },
      ],
    },
    { name: "package.json", type: "file" },
    { name: "tsconfig.json", type: "file" },
    { name: "README.md", type: "file" },
    { name: ".gitignore", type: "file" },
  ]

const getFileContent = (fileName: string) => {
    const contents: Record<string, string> = {
      "app.tsx": `import React from 'react'
import { useState, useEffect } from 'react'
import { Header } from './components/Header'
import { Footer } from './components/Footer'
import './styles/globals.css'

interface AppProps {
  title: string
  theme?: 'light' | 'dark'
}

function App({ title, theme = 'light' }: AppProps) {
  const [count, setCount] = useState<number>(0)
  const [isLoading, setIsLoading] = useState(false)
  
  useEffect(() => {
    document.title = \`\${title} - Count: \${count}\`
  }, [count, title])
  
  const handleIncrement = async () => {
    setIsLoading(true)
    await new Promise(resolve => setTimeout(resolve, 500))
    setCount(prevCount => prevCount + 1)
    setIsLoading(false)
  }
  
  const handleReset = () => {
    setCount(0)
  }
  
  return (
    <div className={\`app theme-\${theme}\`}>
      <Header title={title} />
      <main className="container">
        <div className="counter-section">
          <h1>Counter Application</h1>
          <div className="count-display">
            <span className="count-value">{count}</span>
          </div>
          <div className="button-group">
            <button 
              onClick={handleIncrement}
              disabled={isLoading}
              className="btn btn-primary"
            >
              {isLoading ? 'Loading...' : 'Increment'}
            </button>
            <button 
              onClick={handleReset}
              className="btn btn-secondary"
            >
              Reset
            </button>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}

export default App`,
      "index.tsx": `import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app'
import './styles/globals.css'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
)

root.render(
  <React.StrictMode>
    <App title="My Application" theme="light" />
  </React.StrictMode>
)`,
      "styles.css": `/* Global Styles */
:root {
  --primary-color: #0070f3;
  --secondary-color: #7928ca;
  --background: #ffffff;
  --foreground: #000000;
  --border-radius: 8px;
  --spacing-unit: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--spacing-unit) * 4);
}

.btn {
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  border: none;
  border-radius: var(--border-radius);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: #0051cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
}

.btn-secondary {
  background: #f5f5f5;
  color: #333;
}

.counter-section {
  text-align: center;
  padding: calc(var(--spacing-unit) * 6);
}

.count-display {
  font-size: 72px;
  font-weight: bold;
  margin: calc(var(--spacing-unit) * 4) 0;
  color: var(--primary-color);
}`,
    }
    return contents[fileName] || `// ${fileName}\n\n// File content here...`
  }

return (
    <div className="h-full flex bg-[#1e1e1e] text-white font-mono text-sm">
      {/* Activity Bar */}
      <div className="w-12 bg-[#333333] flex flex-col items-center py-4 gap-4">
        <File className="w-6 h-6 text-white cursor-pointer hover:text-blue-400 transition-colors" />
        <Search className="w-6 h-6 text-gray-400 cursor-pointer hover:text-blue-400 transition-colors" />
        <GitBranch className="w-6 h-6 text-gray-400 cursor-pointer hover:text-blue-400 transition-colors" />
        <Play className="w-6 h-6 text-gray-400 cursor-pointer hover:text-blue-400 transition-colors" />
        <div className="flex-1" />
        <Settings className="w-6 h-6 text-gray-400 cursor-pointer hover:text-blue-400 transition-colors" />
      </div>

{/* Sidebar */}
      <div className="w-64 bg-[#252526] border-r border-[#3e3e42] flex flex-col">
        <div className="p-3 text-xs text-gray-400 uppercase font-semibold tracking-wide">Explorer</div>
        <div className="flex-1 overflow-auto px-2">
          {fileTree.map((item) => (
            <div key={item.name}>
              {item.type === "folder" ? (
                <>
                  <div
                    className="flex items-center gap-1 px-2 py-1 hover:bg-[#2a2d2e] cursor-pointer rounded"
                    onClick={() => toggleFolder(item.name)}
                  >
                    {expandedFolders.includes(item.name) ? (
                      <ChevronDown className="w-4 h-4" />
                    ) : (
                      <ChevronRight className="w-4 h-4" />
                    )}
                    <Folder className="w-4 h-4 text-blue-400" />
                    <span>{item.name}</span>
                  </div>
                  {expandedFolders.includes(item.name) && item.children && (
                    <div className="ml-6">
                      {item.children.map((child) => (
                        <div
                          key={child.name}
                          className={`flex items-center gap-2 px-2 py-1 hover:bg-[#2a2d2e] cursor-pointer rounded ${
                            selectedFile === child.name ? "bg-[#37373d]" : ""
                          }`}
                          onClick={() => openFile(child.name)}
                        >
                          <File className="w-4 h-4 text-gray-400" />
                          <span className="text-sm">{child.name}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </>
              ) : (
                <div
                  className={`flex items-center gap-2 px-2 py-1 hover:bg-[#2a2d2e] cursor-pointer rounded ${
                    selectedFile === item.name ? "bg-[#37373d]" : ""
                  }`}
                  onClick={() => openFile(item.name)}
                >
                  <File className="w-4 h-4 text-gray-400" />
                  <span className="text-sm">{item.name}</span>
                </div>
              )}
            </div>
          ))}
        </div>

<div className="border-t border-[#3e3e42] p-3">
          <div className="text-xs text-gray-400 uppercase font-semibold tracking-wide mb-2">Problems</div>
          <div className="space-y-1 text-xs">
            <div className="flex items-center gap-2 text-yellow-500">
              <AlertCircle className="w-3 h-3" />
              <span>2 Warnings</span>
            </div>
            <div className="flex items-center gap-2 text-green-500">
              <CheckCircle className="w-3 h-3" />
              <span>0 Errors</span>
            </div>
          </div>
        </div>
      </div>

{/* Editor */}
      <div className="flex-1 flex flex-col">
        {/* Tab bar */}
        <div className="h-9 bg-[#252526] border-b border-[#3e3e42] flex items-center px-2 overflow-x-auto">
          {openTabs.map((tab) => (
            <div
              key={tab}
              className={`px-3 py-1 text-sm flex items-center gap-2 rounded-t cursor-pointer group ${
                selectedFile === tab ? "bg-[#1e1e1e] text-white" : "text-gray-400 hover:text-white"
              }`}
              onClick={() => setSelectedFile(tab)}
            >
              <File className="w-4 h-4" />
              <span>{tab}</span>
              <button
                onClick={(e) => closeTab(tab, e)}
                className="opacity-0 group-hover:opacity-100 hover:bg-gray-600 rounded p-0.5 transition-opacity"
              >
                <X className="w-3 h-3" />
              </button>
            </div>
          ))}
        </div>

{/* Code editor */}
        <div className="flex-1 overflow-auto">
          <div className="p-4 bg-[#1e1e1e]">
            <pre className="text-sm leading-relaxed">
              <code className="text-gray-300">{getFileContent(selectedFile)}</code>
            </pre>
          </div>
        </div>

{showTerminal && (
          <div className="h-48 border-t border-[#3e3e42] bg-[#1e1e1e] flex flex-col">
            <div className="h-9 bg-[#252526] flex items-center justify-between px-4 border-b border-[#3e3e42]">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2 text-sm">
                  <TerminalIcon className="w-4 h-4" />
                  <span>Terminal</span>
                </div>
                <span className="text-xs text-gray-400">zsh</span>
              </div>
              <button onClick={() => setShowTerminal(false)} className="hover:bg-gray-600 rounded p-1">
                <X className="w-4 h-4" />
              </button>
            </div>
            <div className="flex-1 overflow-auto p-3 text-xs font-mono">
              {terminalOutput.map((line, i) => (
                <div key={i} className="text-gray-300">
                  {line}
                </div>
              ))}
              <div className="flex items-center gap-2 mt-2">
                <span className="text-green-400">➜</span>
                <span className="text-blue-400">next-app</span>
                <span className="text-gray-400">git:(</span>
                <span className="text-red-400">main</span>
                <span className="text-gray-400">)</span>
                <span className="text-white animate-pulse">▊</span>
              </div>
            </div>
          </div>
        )}

{/* Status bar */}
        <div className="h-6 bg-[#007acc] flex items-center justify-between px-4 text-xs text-white">
          <div className="flex items-center gap-4">
            <span>⚡ Ln 12, Col 5</span>
            <span>UTF-8</span>
            <span>TypeScript React</span>
          </div>
          <div className="flex items-center gap-4">
            <GitBranch className="w-3 h-3 inline" />
            <span>main</span>
            <span>✓ Prettier</span>
            {!showTerminal && (
              <button onClick={() => setShowTerminal(true)} className="hover:bg-blue-600 px-2 py-0.5 rounded">
                Terminal
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}89:["$","$L90",null,{"chatId":"rL1lDhoWL5M","children":["$","$L91",null,{"data":{"@\"active-block\",\"rL1lDhoWL5M\",":{"id":"b_qjBgzhizWUg","messageId":"T2y6ogLnsWarO8CVVm3PnR3fjGZRumvh","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"macos-simulation","type":"code-project","project":"macos-simulation","taskNameActive":"Enhancing VS Code and apps","taskNameComplete":"VS Code and apps enhanced"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"rL1lDhoWL5M\",":false,"":null},"children":"$L93"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from starknightt